关于event.cancelBubble和event.stopPropagation()的区别介绍

关于 event.cancelBubble 和 event.stopPropagation() 的区别，主要是两者在事件冒泡机制中的作用不同。

event.cancelBubble

简介

event.cancelBubble 属性是一种阻止事件冒泡的方法，使用该方法可以阻止事件被传递到父元素。

示例

下面是一个示例，展示如何使用 event.cancelBubble 阻止事件冒泡：

<div id="outer">
  <div id="inner">Click me!</div>
</div>

var inner = document.getElementById('inner');
var outer = document.getElementById('outer');

inner.addEventListener('click', function(event) {
  console.log('Inner clicked');
});

outer.addEventListener('click', function(event) {
  console.log('Outer clicked');
  event.cancelBubble = true;
});

在上面的代码中，当用户点击 #inner 元素时，事件会一直向上冒泡到 #outer 元素。但是因为在 #outer 元素上绑定了 click 事件处理程序，并且将 event.cancelBubble 属性设置为 true，所以点击 #inner 元素时，只会触发 #inner 元素上的事件处理程序。

event.stopPropagation()

简介

event.stopPropagation() 方法也是一种阻止事件冒泡的方法，使用该方法可以阻止事件被传递到父元素。

示例

下面是一个示例，展示如何使用 event.stopPropagation() 阻止事件冒泡：

<div id="outer">
  <div id="inner">Click me!</div>
</div>

var inner = document.getElementById('inner');
var outer = document.getElementById('outer');

inner.addEventListener('click', function(event) {
  console.log('Inner clicked');
});

outer.addEventListener('click', function(event) {
  console.log('Outer clicked');
  event.stopPropagation();
});

在上面的代码中，当用户点击 #inner 元素时，同样会触发 #inner 元素上的事件处理程序。但是在 #outer 元素上绑定的 click 事件处理程序中，使用了 event.stopPropagation() 方法来阻止事件冒泡，因此不会继续向上冒泡到 #outer 元素。

区别

从上面的两个示例可以看出，虽然 event.cancelBubble 和 event.stopPropagation() 两者都可以阻止事件冒泡，但是它们的实现方式不同：

• event.cancelBubble 是直接设置事件对象的 cancelBubble 属性为 true，效果是阻止事件冒泡到父元素。
• event.stopPropagation() 是调用事件对象的 stopPropagation() 方法，效果是阻止事件冒泡到父元素。

另外，event.stopPropagation() 还有一种叫做事件捕获的阶段，可以在事件冒泡过程中的事件捕获阶段调用绑定在祖先元素上的事件处理程序，而 event.cancelBubble 没有这个功能。

总的来说，如果只需要阻止事件冒泡，两者都可以使用，但是如果需要在事件捕获阶段处理事件，只能使用 event.stopPropagation() 方法。