📌  相关文章
📜  反应事件停止传播 - Javascript (1)

📅  最后修改于: 2023-12-03 15:37:05.960000             🧑  作者: Mango

反应事件停止传播 - Javascript

在Javascript中，事件的冒泡是指事件从最内层元素开始触发并向外层元素传递。但是有些情况下，我们希望阻止事件继续传播，这时候可以使用stopPropagation()方法。

使用 stopPropagation() 方法

stopPropagation()方法只需要在事件处理程序中调用即可停止事件继续传播。

document.querySelector('div').addEventListener('click', function(event) {
  event.stopPropagation();
  // 其他处理代码
});

在上面的例子中，当点击<div>元素时，stopPropagation()方法会防止该事件传递到父元素甚至更外层的元素。

示例

下面是一个更完整的示例。当点击<button>时，会弹出一个提示框，但是点击提示框并不会让提示框消失，因为在提示框的事件处理程序中调用了stopPropagation()方法。

<body>
  <div>
    <button>点击我</button>
  </div>

  <script>
    let button = document.querySelector('button');
    let div = document.querySelector('div');

    button.addEventListener('click', function(event) {
      alert('点击了按钮');
      event.stopPropagation();
    });

    div.addEventListener('click', function(event) {
      alert('点击了DIV');
    });
  </script>
</body>
总结

stopPropagation()方法是一个非常有用的方法，能够防止事件继续冒泡。在编写事件处理程序时，应该考虑到事件冒泡的影响，并根据需要使用stopPropagation()方法来停止事件的传播。