任何人都可以告诉我在 Javascript中使用cancelBubble和stopPropagation方法的区别。
cancelBubble 和 stopPropagation 有什么区别？
IT技术
javascript
dom-events
2021-03-08 21:34:30
3个回答
cancelBubble是一个仅限 IE 的布尔属性（不是方法），其作用与stopPropagation()其他浏览器的方法相同，即防止事件移动到其下一个目标（当事件从内到外传播时称为“冒泡”）元素，这是事件在 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);
};
为了与 IE8 和更早版本的兼容性，使用.cancelBubbleif.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
任何人都描述过的另一个区别是，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>其它你可能感兴趣的问题