JS阻止事件冒泡的方法详解

事件冒泡是指事件会从最具体的元素逐级向上传递，直到文档中的最顶层元素。在事件传递过程中，事件会在父节点和子节点之间传递，这可能会导致一些意想不到的后果。为了避免这些问题，我们需要了解如何阻止事件冒泡。

StopPropagation 方法

StopPropagation() 方法可以阻止事件继续传递，它的作用是停止事件在 DOM 中的传播。在事件处理程序中使用 StopPropagation() 方法可以阻止同一事件从被嵌套的元素中重复触发。

语法：

event.stopPropagation();

下面是一个示例，当点击 button 时，会弹出一个 alert 框。但是如果点击 div 中的任何一个子元素，也会触发 div 的点击事件。在这种情况下，我们可以使用 StopPropagation() 方法：

<div onclick="alert('div clicked')">
  <button onclick="alert('button clicked')">Click me</button>
</div>

document.querySelector('button').addEventListener('click', function (event) {
  event.stopPropagation();
});

现在，当你点击 button 时，只会触发 button 的事件处理程序。点击 div 中的其他任何元素时，不会触发 div 的事件处理程序。

PreventDefault 方法

PreventDefault() 方法可以阻止事件的默认动作，例如在 <a> 元素中，可以防止链接跳转到另一个页面。在某些情况下，我们希望阻止事件的默认动作，例如在表单提交之前验证表单字段。

语法：

event.preventDefault();

下面是一个示例，当点击 a 标签时，会跳转到 baidu.com。但是，我们希望在点击 a 标签时，不跳转到 baidu.com 并打印一个消息。在这种情况下，我们可以使用 PreventDefault() 方法：

<a href="http://www.baidu.com">Baidu</a>

document.querySelector('a').addEventListener('click', function (event) {
  event.preventDefault();
  console.log('Clicked on link');
});

现在，当你点击 a 标签时，只会输出一条消息，而不会跳转到 baidu.com。

除了上述两种方法外，还有其他方法可以防止事件冒泡，例如通过设置 mouseup 或 mousedown 事件的返回值为 false，或者在父元素上使用 pointer-events: none 样式属性来禁用子元素的所有指针事件。

希望这篇文章对你有所帮助！