cancelBubble 和 stopPropagation 有什么区别？答案

【问题标题】：What's the difference between cancelBubble and stopPropagation?cancelBubble 和 stopPropagation 有什么区别？
【发布时间】：2011-11-27 14:57:44
【问题描述】：

谁能告诉我在 Javascript 中使用 cancelBubble 和 stopPropagation 方法的区别。

【问题讨论】：

它们是一样的，除了cancelBubble是IE-only的弱点，stopPropagation是标准的。

标签： javascript dom-events

【解决方案1】：

cancelBubble 是一个仅限 IE 的布尔属性（不是方法），其作用与其他浏览器的 stopPropagation() 方法相同，即防止事件移动到下一个目标（称为“冒泡”）当事件从内部元素传播到外部元素时，这是事件在 IE 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);
};

【讨论】：

也许是一件小事，但如果您要将stopPropagation 作为一个函数调用，那么将其作为== "function" 而不是!= "undefined" 进行功能测试不是更好吗？
@ingredient_15939：问题是某些浏览器（主要是旧版本的 IE）中宿主对象的某些方法不会从 typeof 返回 "function"。但是，对于事件对象，您是对的，可以安全地假设 stopPropagation（如果存在）将返回 "function"。

【解决方案2】：

如果.stopPropogation() 未定义，请使用.cancelBubble 与IE8 和更早版本兼容：

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

【讨论】：

【解决方案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>

【讨论】：