JavaScript阻止事件冒泡

取消默認(rèn)操作

w3c 的方法是 e.preventDefault()皆串,IE 則是使用 e.returnValue = false;

在支持 addEventListener() 的瀏覽器中,也能通過調(diào)用時(shí)間對(duì)象的 preventDefault() 方法取消時(shí)間的默認(rèn)操作掉蔬。不過,在 IE9 之前的 IE 中容为,可以通過設(shè)置事件對(duì)象的 returnValue 屬性為 false 來達(dá)到同樣的效果壁却。下面的代碼假設(shè)一個(gè)事件處理程序,它使用全部的三種取消技術(shù):

function cancelHandler(event){  
  var event = event || window.event;  //用于IE  
  if(event.preventDefault) event.preventDefault();  //標(biāo)準(zhǔn)技術(shù)  
  if(event.returnValue) event.returnValue = false;  //IE  
  return false;   //用于處理使用對(duì)象屬性注冊(cè)的處理程序  
}  

當(dāng)前的 DOM 事件模型草案定義了 Event 對(duì)象屬性 defaultPrevented阳懂。

return false

javascript 的 return false 只會(huì)阻止默認(rèn)行為梅尤,而是用 jQuery 的話則既阻止默認(rèn)行為又防止對(duì)象冒泡。

下面這個(gè)使用原生 JS岩调,只會(huì)阻止默認(rèn)行為巷燥,不會(huì)停止冒泡:

<div id='div'  onclick='alert("div");'>  
 
  <ul  onclick='alert("ul");'>  
    <li id='ul-a' onclick='alert("li");'>
        <a  id="testB" >caibaojian.com</a>
    </li> 
    </ul>  
 
</div>  
 
var a = document.getElementById("testB");  
 
  a.onclick = function(){  
 
  return false;  
 
}

阻止冒泡

w3c 的方法是 e.stopPropagation(),IE 則是使用 e.cancelBubble = true

在支持 addEventListener() 的瀏覽器中号枕,可以調(diào)用事件對(duì)象的一個(gè) stopPropagation() 方法已阻止事件的繼續(xù)傳播缰揪。如果在同一對(duì)象上定義了其他處理程序,剩下的處理程序?qū)⒁琅f被調(diào)用葱淳,但調(diào)用 stopPropagation() 方法可以在事件傳播期間的任何時(shí)間調(diào)用钝腺,它能工作在捕獲階段、事件目標(biāo)本身中和冒泡階段赞厕。

IE9 之前的IE不支持 stopPropagation() 方法艳狐。相反,IE事件對(duì)象有一個(gè) cancleBubble 屬性坑傅,設(shè)置這個(gè)屬性為 true 能阻止事件進(jìn)一步傳播僵驰。( IE8 及之前版本不支持事件傳播的捕獲階段,所以冒泡是唯一待取消的事件傳播唁毒。)

當(dāng)前的 DOM 事件規(guī)范草案在 Event 對(duì)象上定義了另一個(gè)方法蒜茴,命名為stopImmediatePropagation()。類似 stopPropagation(),這個(gè)方法組織了任何其他對(duì)象的事件傳播浆西,但也阻止了在相同對(duì)象上注冊(cè)的任何其他事件處理程序的調(diào)用粉私。

<div id='div' onclick='alert("div");'>  
 
  <ul onclick='alert("ul");'>  
 
    <li onclick='alert("li");'>test</li>  
 
  </ul>  
 
</div>
function stopHandler(event)  
 
    window.event?window.event.cancelBubble=true:event.stopPropagation();  
 
}
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市近零,隨后出現(xiàn)的幾起案子诺核,更是在濱河造成了極大的恐慌,老刑警劉巖久信,帶你破解...
    沈念sama閱讀 212,080評(píng)論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件窖杀,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡裙士,警方通過查閱死者的電腦和手機(jī)入客,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,422評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人桌硫,你說我怎么就攤上這事夭咬。” “怎么了铆隘?”我有些...
    開封第一講書人閱讀 157,630評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵卓舵,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我膀钠,道長(zhǎng)掏湾,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,554評(píng)論 1 284
  • 正文 為了忘掉前任托修,我火速辦了婚禮忘巧,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘睦刃。我一直安慰自己,他們只是感情好十酣,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,662評(píng)論 6 386
  • 文/花漫 我一把揭開白布涩拙。 她就那樣靜靜地躺著,像睡著了一般耸采。 火紅的嫁衣襯著肌膚如雪兴泥。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,856評(píng)論 1 290
  • 那天虾宇,我揣著相機(jī)與錄音搓彻,去河邊找鬼。 笑死嘱朽,一個(gè)胖子當(dāng)著我的面吹牛旭贬,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播搪泳,決...
    沈念sama閱讀 39,014評(píng)論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼稀轨,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了岸军?” 一聲冷哼從身側(cè)響起奋刽,我...
    開封第一講書人閱讀 37,752評(píng)論 0 268
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎艰赞,沒想到半個(gè)月后佣谐,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,212評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡方妖,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,541評(píng)論 2 327
  • 正文 我和宋清朗相戀三年狭魂,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,687評(píng)論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡趁蕊,死狀恐怖坞生,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情掷伙,我是刑警寧澤是己,帶...
    沈念sama閱讀 34,347評(píng)論 4 331
  • 正文 年R本政府宣布,位于F島的核電站任柜,受9級(jí)特大地震影響卒废,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜宙地,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,973評(píng)論 3 315
  • 文/蒙蒙 一摔认、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧宅粥,春花似錦参袱、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,777評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至企垦,卻和暖如春环壤,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背钞诡。 一陣腳步聲響...
    開封第一講書人閱讀 32,006評(píng)論 1 266
  • 我被黑心中介騙來泰國(guó)打工郑现, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人荧降。 一個(gè)月前我還...
    沈念sama閱讀 46,406評(píng)論 2 360
  • 正文 我出身青樓接箫,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親誊抛。 傳聞我的和親對(duì)象是個(gè)殘疾皇子列牺,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,576評(píng)論 2 349

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