快捷導(dǎo)航

Js冒泡事件詳解及阻止示例

更新時間：2014年03月21日 16:10:01 作者：

如果某元素定義了事件A，如click事件，如果觸發(fā)了事件之后，沒有阻止冒泡事件，那么事件將向父級元素傳播

Js冒泡機制是指如果某元素定義了事件A，如click事件，如果觸發(fā)了事件之后，沒有阻止冒泡事件，那么事件將向父級元素傳播，觸發(fā)父類的click函數(shù)。
如下例所示：

 
<html> 
<script type="text/javascript" src="jquery-1.7.1.js"></script> 
<script> 
function ialertdouble(e) { 
alert('innerdouble'); 
stopBubble(e); 
} 

function ialertthree(e) { 
alert('innerthree'); 
stopBubbleDouble(e); 
} 

function stopBubble(e) { 
var evt = e||window.event; 
evt.stopPropagation?evt.stopPropagation():(evt.cancelBubble=true);//阻止冒泡 
} 

function stopBubbleDouble(e) { 
var evt = e||window.event; 
evt.stopPropagation?evt.stopPropagation():(evt.cancelBubble=true);//阻止冒泡 
evt.preventDefault();//阻止瀏覽器默認行為，這樣鏈接就不會跳轉(zhuǎn) 
} 

$(function() { 
//方法一 
//$('#jquerytest').click(function(event) { 
// alert('innerfour'); 
// event.stopPropagation(); 
// event.preventDefault(); 
//}); 

//方法二 
$('#jquerytest').click(function() { 
alert('innerfour'); 
return false; 
}); 
}); 
</script> 
<div onclick="alert('without');">without 
<div onclick="alert('middle');">middle 
<div onclick="alert('inner');">inner</div> 
<div onclick="ialertdouble(event)">innerdouble</div> 
<p><a  onclick="ialertthree(event)">innerthree</a></p> 
<p id='jquerytest'><a >innerfour</a></p> 
</div> 
</div> 
</html> 

當(dāng)你點擊inner的時候，會依次彈出‘inner'，‘middle'和‘without'。這就是事件冒泡。

從直觀上來看，也是這樣的，因為最里層的區(qū)域是在父級節(jié)點中的，點擊了子級節(jié)點的區(qū)域，其實也是點擊了父級節(jié)點的區(qū)域，所以事件會傳播起來。

其實，很多的時候，我們并不想事件冒泡，因為這樣會同時觸發(fā)幾個事件。

接下來：我們點擊innerdouble。就會發(fā)現(xiàn)她并沒有冒泡，因為她在調(diào)用的方法ialertdouble()中調(diào)用了stopBubble()方法，方法通過判斷瀏覽器類型（Ie通過cancleBubble() 、firefox通過stopProgation()）來阻止冒泡。

但如果是鏈接的話，我們會發(fā)現(xiàn)她也會阻止冒泡，但是會跳轉(zhuǎn)，這就是瀏覽器的默認行為。需要借助preventDefault()方法來阻止。具體可以查看ialertthree()。

目前主流的都是借助jquery來綁定click事件的，這樣的話，就簡單多了。

我們可以在點擊事件時傳入?yún)?shù)event，然后直接

event.stopPropagation();
event.preventDefault(); //沒有鏈接不需要加這個。

這樣就可以了。

框架就是好，其實還有更簡單的，在事件處理程序中返回false，這是對在事件對象上同時調(diào)用stopPropagation()和preventDefault()的一種簡寫方式。
【詳細代碼見上面，記得載入jquery.js。】

其實也還可以在每個click事件中加入判斷：

復(fù)制代碼代碼如下:

 
$('#id').click(function(event){ 
if(event.target==this){ 
//do something 
} 
}) 

解析：事件處理程序中的變量event保存著事件對象。而event.target屬性保存著發(fā)生事件的目標元素。這個屬性是DOM API中規(guī)定的，但是沒有被所有瀏覽器實現(xiàn) 。jQuery對這個事件對象進行了必要的擴展，從而在任何瀏覽器中都能夠使用這個屬性。通過.target，可以確定DOM中首先接收到事件的元素（即實際被單擊的元素）。而且，我們知道this引用的是處理事件的DOM元素，所以可以編寫以上代碼。

不過推薦使用return false，Jquery綁定事件的話。

您可能感興趣的文章: