阻止事件捕获：一文解读事件传播机制及解决方案

前端

2023-10-27 07:06:32

前言

本文中的所有代码 demo 均在 Chrome 浏览器下运行。阅读本文，你将学到：

事件传播机制
浏览器事件默认传播机制
如何使用 JavaScript 来阻止事件捕获

事件传播机制

浏览器事件默认传播机制

在嵌套元素中，默认的事件传播方向是什么？默认情况下，addEventListener() 方法会将事件监听器添加到捕获阶段。这意味着，当事件发生时，它会先触发捕获阶段的监听器，然后再触发冒泡阶段的监听器。

如何阻止事件捕获

要阻止事件捕获，可以使用 stopPropagation() 方法或 cancelBubble 属性。

stopPropagation() 方法：该方法可以阻止事件在捕获阶段和冒泡阶段的进一步传播。
cancelBubble 属性：该属性是 stopPropagation() 方法的别名，但它只适用于 Internet Explorer 浏览器。

示例代码

以下示例代码演示了如何使用 stopPropagation() 方法来阻止事件捕获：

<div id="parent">
  <div id="child">
    <button id="button">Click me</button>
  </div>
</div>

const button = document.getElementById('button');

button.addEventListener('click', (event) => {
  console.log('Button clicked');

  // 阻止事件捕获
  event.stopPropagation();
});

const parent = document.getElementById('parent');

parent.addEventListener('click', (event) => {
  console.log('Parent clicked');
});