淺談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 href=">
</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();
}
以上所述上就是本文的全部內(nèi)容了，希望大家能夠喜歡。
- js阻止默認(rèn)事件與js阻止事件冒泡示例分享 js阻止冒泡事件
- js阻止冒泡及jquery阻止事件冒泡示例介紹
- js阻止冒泡和默認(rèn)事件（默認(rèn)行為）詳解
- js冒泡、捕獲事件及阻止冒泡方法詳細(xì)總結(jié)
- zepto.js中tap事件阻止冒泡的實(shí)現(xiàn)方法
- JS阻止冒泡事件以及默認(rèn)事件發(fā)生的簡單方法
- js利用事件的阻止冒泡實(shí)現(xiàn)點(diǎn)擊空白模態(tài)框的隱藏
- JavaScript中捕獲/阻止捕獲、冒泡/阻止冒泡方法
- JS工作中的小貼士之”閉包“與事件委托的”阻止冒泡“
- JavaScript捕捉事件和阻止冒泡事件實(shí)例分析
相關(guān)文章
javascript實(shí)現(xiàn)阻止iOS APP中的鏈接打開Safari瀏覽器
這篇文章主要介紹了javascript實(shí)現(xiàn)阻止iOS APP中的鏈接打開Safari瀏覽器,這個(gè)IOS APP一般是Web APP,否則沒法使用本文的代碼,需要的朋友可以參考下2014-06-06
javascript語句中的CDATA標(biāo)簽的意義
javascript語句中的CDATA標(biāo)簽的意義...2007-05-05
js獲取元素到可視區(qū)的距離、瀏覽器窗口滾動(dòng)距離及元素距離瀏覽器頂部距離
這篇文章主要給大家介紹了關(guān)于js獲取元素到可視區(qū)的距離、瀏覽器窗口滾動(dòng)距離及元素距離瀏覽器頂部距離的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-11-11
這篇文章主要給大家介紹了關(guān)于用JS獲取Headers頭部信息的相關(guān)資料,頭部信息是在JavaScript中進(jìn)行網(wǎng)絡(luò)請(qǐng)求時(shí)常用的操作,Headers 頭部信息包含了請(qǐng)求或響應(yīng)的元數(shù)據(jù),需要的朋友可以參考下2023-09-09
這篇文章主要介紹了JavaScript中this的用法,結(jié)合實(shí)例形式分析了this的功能、常見用法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-12-12
JS操作時(shí)間 - UNIX時(shí)間戳的簡單介紹(必看篇)
下面小編就為大家?guī)硪黄狫S操作時(shí)間 - UNIX時(shí)間戳的簡單介紹(必看篇)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
JavaScript數(shù)據(jù)類型及相互間的轉(zhuǎn)換規(guī)則
這篇文章主要介紹了JavaScript數(shù)據(jù)類型及相互間的轉(zhuǎn)換規(guī)則，文章通過圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-09-09
js學(xué)習(xí)總結(jié)_輪播圖之漸隱漸現(xiàn)版(實(shí)例講解)
下面小編就為大家?guī)硪黄猨s學(xué)習(xí)總結(jié)_輪播圖之漸隱漸現(xiàn)版(實(shí)例講解)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
js監(jiān)聽鼠標(biāo)事件控制textarea輸入字符串的個(gè)數(shù)
一個(gè)js控制textarea輸入字符串的個(gè)數(shù)的腳本，當(dāng)鼠標(biāo)按下抬起時(shí)判斷輸入字符數(shù)，很簡單，但很實(shí)用2014-09-09
微信小程序圖片加載失敗時(shí)替換為默認(rèn)圖片的方法
這篇文章主要介紹了微信小程序圖片加載失敗時(shí)替換為默認(rèn)圖片的方法,本文分情況通過實(shí)例代碼給大家講解，需要的朋友可以參考下2019-12-12