快捷導(dǎo)航

關(guān)于event.cancelBubble和event.stopPropagation()的區(qū)別介紹

更新時間：2011年12月11日 22:57:30 作者：

cancelBubble用于ie的阻止冒泡事件，event.stopPropagation（）用于firefox和chrome等其他瀏覽器的疑惑介紹。

首先我在網(wǎng)上看到不少文章大體上分為兩個（不正確）觀點：
1. cancelBubble用于ie的阻止冒泡事件，event.stopPropagation（）用于firefox和chrome等其他瀏覽器。
先不講上面是對是錯
先看一個例子：（測試環(huán)境：chrom5.0.275.7, moz3.6.4, opera10.53, ie6,7,8）

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

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<title>無標題頁</title> 
</head> 
<body onclick="alert('body');"> 
<input id="Button1" type="button" value="button" onclick="clickBtn(event)" /> 
<script language="javascript" type="text/javascript"> 
function clickBtn(event) 
{ 
event=event?event:window.event; 
event.cancelBubble=true; 
alert(event.cancelBubble); 
} 
</script> 
</body> 
</html> 

經(jīng)過測試：
a,chrom5.0.275.7, opera10.53, ie6,7,8在這幾個瀏覽器中， cancelBubble是有效的，并且可以阻止事件冒泡，使body的onclick不能觸發(fā)。只觸發(fā)button的click
alert(event.cancelBubble);輸出結(jié)果true
b,在 moz3.6.4版本內(nèi)，是不能阻止body的onclick的，但是alert(event.cancelBubble);輸出結(jié)果仍然是true ,我想這應(yīng)該是event.cancelBubble只是給event添加一個屬性，并且賦值為true;
當把js代碼改成這樣時：

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

 
<script language="javascript" type="text/javascript"> 
function clickBtn(event) 
{ 
event=event?event:window.event; 
event.stopPropagation(); 
alert("123"); 
} 
</script> 

即可有效阻止。當然在chrome,opera中的 event.stopPropagation();也是有效的，
結(jié)論一：以上說明 event.cancelBubble在新版本chrome,opera瀏覽器中已經(jīng)支持，就差moz了，其實個人認為event.cancelBubble比event.stopPropagation()更好，不僅從英文意思上。所以希望moz再發(fā)新版本也支持。這樣就兼容了
2.還有就是經(jīng)?？吹年P(guān)于事件順序的問題：
不完全準確的結(jié)論（自認為）
ie:源事件元素->>父級元素事件->>body-->>document
moz:等其他瀏覽器與上面相反
先看一個例子：

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

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<title>無標題頁</title> 
</head> 
<body onclick="alert('body');"> 
<div onclick="clickBtn(event)" style="width:100px;height:100px; background:#666;"> 
<input id="Button1" type="button" value="button" onclick="alert('btn');" /> 
</div> 
<script language="javascript" type="text/javascript"> 
function clickBtn(event) 
{ 
event=event?event:window.event; 
event.stopPropagation(); 
alert("123"); 
} 
</script> 
</body> 
</html> 

如果按照上面的觀點我現(xiàn)在點擊button 事件從 body---->div----->button,,,,那么就是先alertbody然后再觸發(fā)div彈出123,由于阻止冒泡，所以button的click不會觸發(fā)。
但經(jīng)過我們測試。moz還是按照由內(nèi)向外觸發(fā)。正確的執(zhí)行alert("btn")--->>alert("123")----阻止冒泡不觸發(fā)body的click事件
到這你是不是會懷疑上面不正確，不過上面的講法對用addListenter和attachEvent添加的事件是正確的（）。如：

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

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<title>無標題頁</title> 
</head> 
<body> 
<ul id='ul'> 
<li id='li1'>List Item1</li> 
<li id='li2'>List Item2</li> 
</ul> 
<script language="javascript" type="text/javascript"> 
function init(){ 
if(!!document.all){ 
document.getElementById('li1').attachEvent('onclick', function(event){ 
alert('li1'); 
}) 
document.getElementById('li2').attachEvent('onclick', function(event){ 
alert('li2'); 
}) 
document.getElementById('ul').attachEvent('onclick', function(event){ 
alert('ul'); 
//event.cancelBubble = true; 
alert(event.stopPropagation); 
}); 
}else{ 
document.getElementById('li1').addEventListener('click', function(event){ 
alert('li1'); 
}, true) 
document.getElementById('li2').addEventListener('click', function(event){ 
alert('li2'); 
}, true) 
document.getElementById('ul').addEventListener('click', function(event){ 
event=event?event:window.event; 
event.stopPropagation(); 
alert('ul'); 
}, true); 
} 
} 
init(); 
</script> 
</body> 
</html> 

用這種方法是符合的。執(zhí)行結(jié)果是觸發(fā)ul的click事件然后由于阻止了冒泡所以此時你點擊li時，其本身的click事件不觸發(fā)。（順便說一句，用這種動態(tài)添加事件的方法，好像 event.cancelBubble在moz中也有效了不過在chrome和moz中有區(qū)別）

您可能感興趣的文章: