首先我在網上看到不少文章大體上分為兩個（不正確）觀點：
1. cancelBubble用於ie的阻止冒泡事件，event.stopPropagation（）用於firefox和chrome等其他浏覽器。
先不講上面是對是錯
先看一個例子：（測試環境：chrom5.0.275.7, moz3.6.4, opera10.53, ie6,7,8）
. 代碼如下:
<!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>
經過測試：
a,chrom5.0.275.7, opera10.53, ie6,7,8在這幾個浏覽器中 ， cancelBubble是有效的，並且可以阻止事件冒泡，使body的onclick不能觸發。只觸發button的click
alert(event.cancelBubble);輸出結果true
b,在 moz3.6.4版本內，是不能阻止body的onclick的，但是alert(event.cancelBubble);輸出結果仍然是true ,我想這應該是event.cancelBubble只是給event添加一個屬性，並且賦值為true;
當把js代碼改成這樣時：
. 代碼如下:
<script language="javascript" type="text/javascript">
function clickBtn(event)
{
event=event?event:window.event;
event.stopPropagation();
alert("123");
}
</script>
即可有效阻止。當然在chrome,opera中的 event.stopPropagation();也是有效的，
結論一：以上說明 event.cancelBubble在新版本chrome,opera浏覽器中已經支持，就差moz了，其實個人認為event.cancelBubble比event.stopPropagation()更好，不僅從英文意思上。所以希望moz再發新版本 也支持。這樣就兼容了
2.還有就是經常看的關於事件順序的問題：
不完全准確的結論（自認為）
ie:源事件元素->>父級元素事件->>body-->>document
moz:等其他浏覽器與上面相反
先看一個例子：
. 代碼如下:
<!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>
如果按照上面的觀點 我現在點擊button 事件從 body---->div----->button,,,,那麼就是 先alertbody然後再觸發div彈出123,由於阻止冒泡，所以button的click不會觸發。
但經過我們測試。moz還是按照由內向外觸發。正確的執行alert("btn")--->>alert("123")----阻止冒泡 不觸發body的click事件
到這你是不是會懷疑上面不正確，不過上面的講法對用addListenter和attachEvent添加的事件是正確的（）。如：
. 代碼如下:
<!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>
用這種方法 是符合的。執行結果是觸發ul的click事件然後由於阻止了冒泡所以此時你點擊li時，其本身的click事件不觸發。（順便說一句，用這種動態添加事件的方法，好像 event.cancelBubble在moz中也有效了不過在chrome和moz中有區別）