JavaScript冒泡和捕獲是事件的兩種行為，使用event.stopPropagation()起到阻止捕獲和冒泡階段中當(dāng)前事件的進(jìn)一步傳播。使用event.preventDefault()可以取消默認(rèn)事件。

防止冒泡和捕獲

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

stopPropagation也是事件對象(Event)的一個(gè)方法，作用是阻止目標(biāo)元素的冒泡事件，但是會(huì)不阻止默認(rèn)行為。

什么是冒泡事件？如在一個(gè)按鈕是綁定一個(gè)”click”事件，那么”click”事件會(huì)依次在它的父級元素中被觸發(fā) 。

stopPropagation就是阻止目標(biāo)元素的事件冒泡到父級元素。如：


<div id='div' onclick='alert("div");'><ul onclick='alert("ul");'><li onclick='alert("li");'>test</li></ul></div>

上面的代碼，Demo如下,我們單擊test時(shí)，會(huì)依次觸發(fā)alert(“l(fā)i”),alert(“ul”),alert(“div”)，這就是事件冒泡。

阻止冒泡


window.event? window.event.cancelBubble = true : e.stopPropagation();

取消默認(rèn)事件

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

preventDefault它是事件對象(Event)的一個(gè)方法，作用是取消一個(gè)目標(biāo)元素的默認(rèn)行為。既然是說默認(rèn)行為，當(dāng)然是元素必須有默認(rèn)行為才能被取消，如果元素本身就沒有默認(rèn)行為，調(diào)用當(dāng)然就無效了。

什么元素有默認(rèn)行為呢？如鏈接<a>，提交按鈕<input type=”submit”>等。當(dāng)Event 對象的 cancelable為false時(shí)，表示沒有默認(rèn)行為，這時(shí)即使有默認(rèn)行為，調(diào)用preventDefault也是不會(huì)起作用的。

我們都知道，鏈接<a>的默認(rèn)動(dòng)作就是跳轉(zhuǎn)到指定頁面，下面就以它為例，阻止它的跳轉(zhuǎn)：


//假定有鏈接<a href="http:// fly63.com/" id="testA" > fly63.com</a>var a = document.getElementById("testA");a.onclick =function(e){if(e.preventDefault){e.preventDefault();}else{window.event.returnValue == false;}}

return false

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

下面這個(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="http:// fly63.com/"id="testB"> fly63.com</a></li></ul></div>var a = document.getElementById("testB");a.onclick = function(){return false;};

下面這個(gè)是使用jQuery，既阻止默認(rèn)行為又停止冒泡


<div id='div'  onclick='alert("div");'><ul  onclick='alert("ul");'><li id='ul-a' onclick='alert("li");'><a href="http:// fly63.com/"id="testC"> fly63.com</a></li></ul></div>$("#testC").on('click',function(){return false;});

總結(jié)使用方法

當(dāng)需要停止冒泡行為時(shí)，可以使用


function stopBubble(e) { //如果提供了事件對象，則這是一個(gè)非IE瀏覽器if ( e && e.stopPropagation )     //因此它支持W3C的stopPropagation()方法     e.stopPropagation(); else     //否則，我們需要使用IE的方式來取消事件冒泡     window.event.cancelBubble = true; }

當(dāng)需要阻止默認(rèn)行為時(shí)，可以使用


//阻止瀏覽器的默認(rèn)行為 function stopDefault( e ) {     //阻止默認(rèn)瀏覽器動(dòng)作(W3C)     if ( e && e.preventDefault )         e.preventDefault();     //IE中阻止函數(shù)器默認(rèn)動(dòng)作的方式     else         window.event.returnValue = false;     return false; }

事件注意點(diǎn)

event代表事件的狀態(tài)，例如觸發(fā)event對象的元素、鼠標(biāo)的位置及狀態(tài)、按下的鍵等等；
event對象只在事件發(fā)生的過程中才有效。

firefox里的event跟IE里的不同，IE里的是全局變量，隨時(shí)可用；firefox里的要用參數(shù)引導(dǎo)才能用，是運(yùn)行時(shí)的臨時(shí)變量。

在IE/Opera中是window.event，在Firefox中是event；而事件的對象，在IE中是window.event.srcElement，在Firefox中是event.target，Opera中兩者都可用。

下面兩句效果相同：


function a(e){var e = (e) ? e : ((window.event) ? window.event : null); var e = e || window.event; // firefox下window.event為null, IE下event為null}

總結(jié)

感謝您的時(shí)間，感謝您的閱讀。

學(xué)習(xí)更多技能
請點(diǎn)擊下方公眾號(hào)

JavaScript阻止冒泡和取消默認(rèn)事件(默認(rèn)行為)