快捷導(dǎo)航

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

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

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

Js冒泡機(jī)制是指如果某元素定義了事件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();//阻止瀏覽器默認(rèn)行為，這樣鏈接就不會跳轉(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í)候，會依次彈出‘inner'，‘middle'和‘without'。這就是事件冒泡。

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

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

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

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

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

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

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

這樣就可以了。

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

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

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

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

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

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

您可能感興趣的文章: