Javascript cancelBubble 和 stopPropagation 有什么区别？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7596364/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What's the difference between cancelBubble and stopPropagation?
提问by ahamed
Can anyone please tell me difference in usage of cancelBubbleand stopPropagationmethods used in javascript.
任何人都可以告诉我在 javascript中使用cancelBubble和stopPropagation方法的区别。
回答by Tim Down
cancelBubbleis an IE-only Boolean property (not method) that serves the same purpose as the stopPropagation()method of other browsers, which is to prevent the event from moving to its next target (known as "bubbling" when the event is travelling from inner to outer elements, which is the only way an event travels in IE < 9). IE 9 now supports stopPropagation()so cancelBubblewill eventually become obsolete. In the meantime, the following is a cross-browser function to stop an event propagating:
cancelBubble是一个仅限 IE 的布尔属性（不是方法），其作用与stopPropagation()其他浏览器的方法相同，即防止事件移动到其下一个目标（当事件从内到外传播时称为“冒泡”）元素，这是事件在 IE < 9 中传播的唯一方式）。IE 9 现在支持stopPropagation()所以cancelBubble最终会过时。同时，以下是用于停止事件传播的跨浏览器功能：
function stopPropagation(evt) {
if (typeof evt.stopPropagation == "function") {
evt.stopPropagation();
} else {
evt.cancelBubble = true;
}
}
In an event handler function, you could use it as follows:
在事件处理函数中，您可以按如下方式使用它：
document.getElementById("foo").onclick = function(evt) {
evt = evt || window.event; // For IE
stopPropagation(evt);
};
回答by Andrew D.
For compatibility with IE8 and older use .cancelBubbleif .stopPropogation()is undefined:
为了与 IE8 和更早版本的兼容性，使用.cancelBubbleif.stopPropogation()未定义：
if(ev.stopPropagation)ev.stopPropagation();
else ev.cancelBubble=true; // where ev is an event object
Read about in MSDN: http://msdn.microsoft.com/en-us/library/ff975961%28v=vs.85%29.aspx
在 MSDN 中阅读：http: //msdn.microsoft.com/en-us/library/ff975961%28v=vs.85%29.aspx
回答by Pawe?
Another difference that anyone has described is that e.cancelBubblestops event propagation for the further elements only in bubbling phase (when event reaches the first bubbling element), while .preventDefault()prevent propagation both in capturing and bubbling phase (immediately for the next element in propagation).
任何人都描述过的另一个区别是，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>