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>