關(guān)于js中return false褥蚯、event.preventDefault()和event.stopPropagation()

原文鏈接:https://www.cnblogs.com/momo798/p/6025777.html
我的理解:preventDefault()主要是阻止自身的默認(rèn)行為挚冤,stopPropagation主要是用來(lái)阻止傳播,冒泡赞庶;return false是兩者結(jié)合训挡。
在平時(shí)項(xiàng)目中,如果遇到需要阻止瀏覽器默認(rèn)行為摊册,大家經(jīng)常會(huì)用return false;和event.preventDefault()來(lái)阻止肤京,但對(duì)它倆的區(qū)別還是有些一知半解,于是看了文檔茅特,查了些資料忘分,在此總結(jié)下它倆的區(qū)別,順便帶上event.stopPropagation()一起區(qū)分下白修。

一妒峦、原生js中:

關(guān)于return false和preventDefault:

W3C Document Object Model Events Specification1.3版本中提到過(guò):

<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">The EventListener interface is the primary method for handling events. Users implement the EventListener interface
and register their listener on an EventTarget using the AddEventListener method. The users should also remove their
EventListener from its EventTarget after they have completed using the listener.</pre>

<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">handleEvent
This method is called whenever an event occurs of the type for which the EventListener interface was registered.</pre>

同時(shí),在1.2.4. Event Cancelation 文檔中也提到:

<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">Cancelation is accomplished by calling the Event's preventDefault method. If one or more EventListeners call preventDefault
during any phase of event flow the default action will be canceled. </pre>

HTML5 Section 6.1.5.1 of the HTML Spec規(guī)范定義如下:

<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">Otherwise
If return value is a WebIDL boolean false value, then cancel the event.</pre>

也就是說(shuō)兵睛,事件處理程序的返回值只對(duì)通過(guò)屬性注冊(cè)的處理程序才有意義肯骇,如果我們未通過(guò)addEventListener()函數(shù)來(lái)綁定事件的話,若要禁止默認(rèn)事件卤恳,用的就是return false; 但如果要用addEventListener()或者attachEvent()來(lái)綁定累盗,就要用preventDefault()方法或者設(shè)置事件對(duì)象的returnValue屬性寒矿。

而H5規(guī)范中為什么要OtherWise來(lái)強(qiáng)調(diào)return false突琳,因?yàn)橐?guī)范中有指出在mouseover等幾種特殊事件情況下,return false;并不一定能終止事件符相。所以拆融,在實(shí)際使用中,我們需要盡量避免通過(guò)return false;的方式來(lái)取消事件的默認(rèn)行為啊终。

** 二镜豹、在jQuery中:**

這里需要先了解下事件傳遞機(jī)制:

例如鼠標(biāo)被按下后,mousedown事件被觸發(fā)蓝牲。
事件先從document->ancestor element->...->parent->event.target(在此元素上按下的鼠標(biāo))->parent->...->ancestor element->document.
事件走了一個(gè)循環(huán)趟脂,從documet到event.target再回到document,從event.target到document的過(guò)程叫做冒泡例衍。

event.stopPropagation(); // 事件停止冒泡到昔期,即不讓事件再向上傳遞到document已卸,但是此事件的默認(rèn)行為仍然被執(zhí)行,如點(diǎn)擊一個(gè)鏈接硼一,調(diào)用了event.stopPropagation()累澡,鏈接仍然會(huì)被打開(kāi)。

event.preventDefault(); // 取消了事件的默認(rèn)行為般贼,如點(diǎn)擊一個(gè)鏈接愧哟,鏈接不會(huì)被打開(kāi),但是此事件仍然會(huì)傳遞給更上一層的先輩元素哼蛆。

在事件處理函數(shù)中使用 return false; 相當(dāng)于同時(shí)調(diào)用了event.stopPropagation()和event.preventDefault()蕊梧,事件的默認(rèn)行為不會(huì)被執(zhí)行,事件也不會(huì)冒泡向上傳遞腮介。

此時(shí)在jQuery中望几,return false;就不是簡(jiǎn)單的覆蓋面和規(guī)范的問(wèn)題了萤厅。在jQuery事件處理函數(shù)中調(diào)用return false;相當(dāng)于同時(shí)調(diào)用了preventDefault和stopPropagation方法橄抹,這會(huì)導(dǎo)致當(dāng)前元素的事件無(wú)法向上冒泡,在事件代理模式下惕味,會(huì)導(dǎo)致問(wèn)題楼誓。

比如,我有一個(gè)div容器名挥,里面是 幾個(gè)a標(biāo)簽疟羹,它們的href里分別存儲(chǔ)了url地址,這個(gè)url被用來(lái)動(dòng)態(tài)的載入到下面的div#content中禀倔,這里為了簡(jiǎn)單演示榄融,就只把url字符串寫(xiě)入到div#content中:

<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;"><div id="container">
<a href="/content1.html">content1</a>
<a href="/content2.html">content2</a>
<div id="content">我會(huì)根據(jù)點(diǎn)擊鏈接的url不同而改變的</div>
</div></pre>

<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">// 為container下的所有a標(biāo)簽綁定click事件處理函數(shù)
("#container").click(function (e) { if (e.target.nodeName == "A") {("#content").html(e.target.href);
}
}); // 再為a標(biāo)簽綁定click事件處理函數(shù),阻止默認(rèn)事件
$("#container a").click(function () { return false;
});</pre>

上面的代碼運(yùn)行后救湖,雖然阻止了a標(biāo)簽的點(diǎn)擊默認(rèn)行為愧杯,但同時(shí)停止了冒泡事件,導(dǎo)致其外層的父元素?zé)o法檢測(cè)到click事件鞋既,所以jQuery中需要明白return false;和event.preventDefault()二者的區(qū)別力九。

即盡量不要用return false;來(lái)阻止event的默認(rèn)行為。

附:

event.preventDefault()方法并不被ie支持邑闺,在ie下需要用window.event.returnValue = false; 來(lái)實(shí)現(xiàn)跌前。一般都是這樣寫(xiě),代碼如下:

function stopDefault( e ) {
if ( e && e.preventDefault ){
e.preventDefault(); //支持DOM標(biāo)準(zhǔn)的瀏覽器

} else {
window.event.returnValue = false; //IE

}
}

也可以處理ie || firefox下圖片拖動(dòng)的問(wèn)題陡舅。

<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">document.onmousemove=function(ev){
  var oEvent=ev||event;
  if(oEvent.preventDefault){oEvent.preventDefault();}
  else{oEvent.returnValue=false;}
}</pre>

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末抵乓,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌灾炭,老刑警劉巖章鲤,帶你破解...
    沈念sama閱讀 222,681評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異咆贬,居然都是意外死亡败徊,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門(mén)掏缎,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)皱蹦,“玉大人,你說(shuō)我怎么就攤上這事眷蜈』Σ福” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 169,421評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵酌儒,是天一觀的道長(zhǎng)辜妓。 經(jīng)常有香客問(wèn)我,道長(zhǎng)忌怎,這世上最難降的妖魔是什么籍滴? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 60,114評(píng)論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮榴啸,結(jié)果婚禮上孽惰,老公的妹妹穿的比我還像新娘。我一直安慰自己鸥印,他們只是感情好勋功,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,116評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著库说,像睡著了一般狂鞋。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上潜的,一...
    開(kāi)封第一講書(shū)人閱讀 52,713評(píng)論 1 312
  • 那天骚揍,我揣著相機(jī)與錄音,去河邊找鬼夏块。 笑死疏咐,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的脐供。 我是一名探鬼主播,決...
    沈念sama閱讀 41,170評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼借跪,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼政己!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 40,116評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤歇由,失蹤者是張志新(化名)和其女友劉穎卵牍,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體沦泌,經(jīng)...
    沈念sama閱讀 46,651評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡糊昙,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,714評(píng)論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了谢谦。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片释牺。...
    茶點(diǎn)故事閱讀 40,865評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖回挽,靈堂內(nèi)的尸體忽然破棺而出没咙,到底是詐尸還是另有隱情,我是刑警寧澤千劈,帶...
    沈念sama閱讀 36,527評(píng)論 5 351
  • 正文 年R本政府宣布祭刚,位于F島的核電站,受9級(jí)特大地震影響墙牌,放射性物質(zhì)發(fā)生泄漏涡驮。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,211評(píng)論 3 336
  • 文/蒙蒙 一喜滨、第九天 我趴在偏房一處隱蔽的房頂上張望遮怜。 院中可真熱鬧,春花似錦鸿市、人聲如沸锯梁。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,699評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)陌凳。三九已至,卻和暖如春内舟,著一層夾襖步出監(jiān)牢的瞬間合敦,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,814評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工验游, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留充岛,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,299評(píng)論 3 379
  • 正文 我出身青樓耕蝉,卻偏偏與公主長(zhǎng)得像崔梗,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子垒在,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,870評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • ??JavaScript 與 HTML 之間的交互是通過(guò)事件實(shí)現(xiàn)的。 ??事件谈为,就是文檔或?yàn)g覽器窗口中發(fā)生的一些特...
    霜天曉閱讀 3,503評(píng)論 1 11
  • 以下文章為轉(zhuǎn)載旅挤,對(duì)理解JavaScript中的事件處理機(jī)制很有幫助,淺顯易懂伞鲫,特分享于此粘茄。 什么是事件? 事件(E...
    jxyjxy閱讀 3,043評(píng)論 1 10
  • Call 和 Apply 的區(qū)別 語(yǔ)法:function.call(thisObj [, arg1[, arg2[...
    他方l閱讀 312評(píng)論 0 0
  • Call 和 Apply 的區(qū)別語(yǔ)法:function.call(thisObj [, arg1[, arg2[,...
    HeroXin閱讀 263評(píng)論 0 1
  • 這幾天幾乎中午和晚上一波一波的應(yīng)酬秕脓,這邊的老鄉(xiāng)和客戶真的是非称獍辏客氣,現(xiàn)在的生意伙伴都成了朋友撒会。 昨天一...
    花朵兒靜靜閱讀 168評(píng)論 2 2