cancelBubble和stopPropagation有什么区别？
任何人都可以告诉我在JavaScript中使用cancelBubble和stopPropagation方法的区别。
cancelBubble是一个仅用于IE浏览器的布尔属性（不是方法），与其他浏览器的stopPropagation()方法有相同的作用，它阻止事件移动到下一个目标（当事件正在旅行时称为“冒泡”从内部到外部的元素，这是事件在IE浏览器中传播的唯一方式。 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); };
为了与IE8兼容，如果.stopPropogation()未定义，则使用.cancelBubble ：
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
另一个不同之处在于， 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>
