CancelBubble和stopPropagation有什麼區別？

Question

任何人都可以告訴我在JavaScript中使用cancelBubble和stopPropagation方法的區別。

Answer 1

cancelBubble是服務於相同的目的的其他瀏覽器stopPropagation()方法，這是爲了防止事件移動到其下一個目標（稱爲「鼓泡」的時候，事件的IE-只有布爾屬性（未法）是從內部到外部的元素，這是事件在IE < 9中傳播的唯一方式）。 IE 9現在支持stopPropagation()，所以cancelBubble最終會過時。與此同時，下面是一個跨瀏覽器的功能，以阻止事件傳播：

function stopPropagation(evt) { 
    if (typeof evt.stopPropagation == "function") { 
     evt.stopPropagation(); 
    } else { 
     evt.cancelBubble = true; 
    } 
} 

在事件處理函數，可以按如下方式使用它：

document.getElementById("foo").onclick = function(evt) { 
    evt = evt || window.event; // For IE 
    stopPropagation(evt); 
}; 

Answer 2

，以兼容IE8和舊的使用.cancelBubble如果.stopPropogation()未定義：

if(ev.stopPropagation)ev.stopPropagation(); 
else ev.cancelBubble=true; // where ev is an event object 

閱讀有關MSDN：http://msdn.microsoft.com/en-us/library/ff975961%28v=vs.85%29.aspx

Answer 3

另一個不同之處在於，任何人都描述過，e.cancelBubble僅在冒泡階段（當事件到達第一個冒泡元素時）停止事件傳播，而.preventDefault()阻止捕獲和冒泡階段的傳播（緊接着爲下一個元素傳播）。

var a = document.getElementById('a'); 
 
var b = document.getElementById('b'); 
 
var c = document.getElementById('c'); 
 
var d = document.getElementById('d'); 
 

 
a.addEventListener('click',cancel,true); 
 
b.addEventListener('click',cancel,true); 
 
c.addEventListener('click',cancel,false); 
 
d.addEventListener('click',cancel,false); 
 

 

 
function cancel(event){ 
 
    var logElem = event.currentTarget.id; 
 
    console.log(logElem); 
 
    if(logElem==='a') event.cancelBubble = true; 
 
    
 
} 
 

 

 
var e = document.getElementById('e'); 
 
var f = document.getElementById('f'); 
 
var g = document.getElementById('g'); 
 
var h = document.getElementById('h'); 
 

 
e.addEventListener('click',stop,true); 
 
f.addEventListener('click',stop,true); 
 
g.addEventListener('click',stop,false); 
 
h.addEventListener('click',stop,false); 
 

 

 
function stop(event){ 
 
    var logElem = event.currentTarget.id; 
 
    console.log(logElem); 
 
    if(logElem==='e') event.stopPropagation(); 
 
    
 
}

#a,#b,#c,#d,#e,#f,#g,#h{ 
 
    box-sizing:border-box; 
 
    width:100%; 
 
    height:90%; 
 
    border:solid 1px #33aaff; 
 
    padding:10px; 
 
    padding-top:0px; 
 
    cursor:pointer; 
 
} 
 

 
#a,#e{ 
 
    width:200px; 
 
    height:200px; 
 

 
}

<h3>cancelBubble</h3> 
 
<div id='a'>a capturing 
 
    <div id='b'>b capturing 
 
    <div id='c'>c bubbling 
 
     <div id='d'>d bubbling 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<h3>stopPropagation</h3> 
 
<div id='e'>e capturing 
 
    <div id='f'>f capturing 
 
    <div id='g'>g bubbling 
 
     <div id='h'>h bubbling 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>