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

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

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

Js冒泡機(jī)制是指如果某元素定義了事件A，如click事件，如果觸發(fā)了事件之后，沒(méi)有阻止冒泡事件，那么事件將向父級(jí)元素傳播，觸發(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();//阻止瀏覽器默認(rèn)行為，這樣鏈接就不會(huì)跳轉(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)你點(diǎn)擊inner的時(shí)候，會(huì)依次彈出‘inner'，‘middle'和‘without'。這就是事件冒泡。

從直觀上來(lái)看，也是這樣的，因?yàn)樽罾飳拥膮^(qū)域是在父級(jí)節(jié)點(diǎn)中的，點(diǎn)擊了子級(jí)節(jié)點(diǎn)的區(qū)域，其實(shí)也是點(diǎn)擊了父級(jí)節(jié)點(diǎn)的區(qū)域，所以事件會(huì)傳播起來(lái)。

其實(shí)，很多的時(shí)候，我們并不想事件冒泡，因?yàn)檫@樣會(huì)同時(shí)觸發(fā)幾個(gè)事件。

接下來(lái)：我們點(diǎn)擊innerdouble。就會(huì)發(fā)現(xiàn)她并沒(méi)有冒泡，因?yàn)樗谡{(diào)用的方法ialertdouble()中調(diào)用了stopBubble()方法，方法通過(guò)判斷瀏覽器類型（Ie通過(guò)cancleBubble() 、firefox通過(guò)stopProgation()）來(lái)阻止冒泡。

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

目前主流的都是借助jquery來(lái)綁定click事件的，這樣的話，就簡(jiǎn)單多了。

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

event.stopPropagation();
event.preventDefault(); //沒(méi)有鏈接不需要加這個(gè)。

這樣就可以了。

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

其實(shí)也還可以在每個(gè)click事件中加入判斷：

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

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

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

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

您可能感興趣的文章: