阻止事件传播

为了阻止事件在捕获和冒泡阶段进一步传播，您可以在事件处理程序中调用 Event.stopPropation() 方法。

Event.stopPropagation();Code language: CSS (css)

请注意，event.stopPropagation() 方法不会停止元素的任何默认行为，例如链接点击、复选框选中。如果您想停止默认行为，可以使用 Event.preventDefault() 方法。

假设您有一个位于 <div> 中的按钮。

 <div id="box">
    <button class="btn">Register</button>
  </div>Code language: HTML, XML (xml)

当您点击按钮时，事件会冒泡到 <div> 元素。以下代码显示了当您点击按钮时出现的两个 警报 框。

const btn = document.querySelector('.btn');
const box = document.querySelector('#box');

btn.addEventListener('click', function (e) {
  alert('The button was clicked!');

});

box.addEventListener('click', function (e) {
  alert('The box was clicked!');
});Code language: JavaScript (javascript)

为了阻止点击事件传播到 <div> 元素，您可以在按钮的事件处理程序中调用 stopPropagation() 方法。

btn.addEventListener('click', function (e) {
  alert('The button was clicked!');
  e.stopPropagation();
});Code language: JavaScript (javascript)

现在，当您点击按钮时，只显示一个警报框。