js 阻止事件冒泡|极客笔记

js 阻止事件冒泡

在JavaScript中，事件冒泡是指当一个事件触发在一个元素上时，这个事件将会向上传播到该元素的父级元素，直到根元素（document对象）。有时候我们希望阻止事件冒泡，使事件只在当前元素上触发，而不再向上冒泡。本文将详细介绍在JavaScript中如何阻止事件冒泡。

什么是事件冒泡

事件冒泡是DOM事件传播机制的一种。当一个事件（比如点击事件）在一个元素上触发后，该事件将会向上冒泡到该元素的父级元素，直到根元素。这样，如果我们在父元素上也有相同的事件监听器，那么父元素上的事件监听器也会被触发。举个示例：

<!DOCTYPE html>
<html>
<head>
  <title>Event Bubbling Example</title>
</head>
<body>
  <div id="parent">
    Parent Element
    <div id="child">
      Child Element
    </div>
  </div>
  <script>
    document.getElementById('parent').addEventListener('click', function() {
      console.log('Parent Element Clicked');
    });

    document.getElementById('child').addEventListener('click', function() {
      console.log('Child Element Clicked');
    });
  </script>
</body>
</html>

在上面的示例中，当我们点击”Child Element”时，控制台会打印出：

Child Element Clicked
Parent Element Clicked

这是因为点击事件在子元素上触发后冒泡到了父元素，导致父元素上的点击事件也被触发。

阻止事件冒泡

使用 stopPropagation()

在JavaScript中，我们可以使用事件对象的stopPropagation()方法来阻止事件冒泡。stopPropagation()方法会阻止事件继续向上传播，从而阻止父元素上的事件监听器被触发。

下面是如何在点击子元素时阻止事件冒泡的代码示例：

<!DOCTYPE html>
<html>
<head>
  <title>Stop Event Bubbling Example</title>
</head>
<body>
  <div id="parent">
    Parent Element
    <div id="child">
      Child Element
    </div>
  </div>
  <script>
    document.getElementById('parent').addEventListener('click', function() {
      console.log('Parent Element Clicked');
    });

    document.getElementById('child').addEventListener('click', function(e) {
      e.stopPropagation();
      console.log('Child Element Clicked');
    });
  </script>
</body>
</html>

在上面的示例中，当我们点击”Child Element”时，控制台只会打印：