为何cancelBubble属性在谷歌Chrome中生效？我曾认为它是IE专属布尔属性

哈哈，我当初第一次在Chrome里试cancelBubble居然生效的时候，和你一模一样的惊讶——这玩意儿不是IE的专属吗？其实原因主要是历史兼容和标准的后续纳入，给你拆解一下：

• 旧代码兼容需求：早年IE主导浏览器市场的时候，大量网站用cancelBubble来阻止事件冒泡。后来现代浏览器崛起，如果直接不支持这个属性，这些旧网站就会出现功能故障。为了保证网页的向后兼容性，Chrome、Firefox等主流浏览器都陆续实现了这个属性，用来兼容那些遗留代码。

• 被纳入标准的历史遗留属性：虽然一开始cancelBubble是IE的私有属性，但后来它被加入了DOM Living Standard（现行的DOM标准），作为历史遗留特性保留。不过要注意，它的行为和标准方法stopPropagation()有细微区别：

  • cancelBubble是布尔值，设置为true就会阻止事件冒泡；而stopPropagation()是一个方法，调用即可生效。
  • cancelBubble只能阻止事件的冒泡阶段，无法阻止捕获阶段的事件传播；而stopPropagation()可以同时阻止捕获和冒泡阶段的传播。

举个简单的代码例子，两种写法在Chrome里都能生效：

// 用cancelBubble阻止冒泡
document.querySelector('.child').addEventListener('click', function(e) {
  e.cancelBubble = true;
  alert('子元素点击，不会冒泡到父元素');
});

// 标准写法
document.querySelector('.child').addEventListener('click', function(e) {
  e.stopPropagation();
  alert('子元素点击，不会冒泡到父元素');
});

不过现在开发里还是更推荐用标准的stopPropagation()，毕竟cancelBubble更多是为了兼容旧代码而存在的~

内容的提问来源于stack exchange，提问作者Zayev Andrey