如何实现click.stop阻止事件冒泡的方法

发布时间：2023-05-20

一、理解事件冒泡

在学习如何阻止事件冒泡之前，我们需要先了解什么是事件冒泡。事件冒泡是指，当一个元素上的事件被触发时，会将此事件依次传递给这个元素的父级元素，直到传递到 document 对象为止。 比如，当我们在一个按钮上点击鼠标时，click 事件会传递给这个按钮的父元素，再传递给上一个父元素，最终传递到 document 对象。这个传递过程就是事件冒泡。

二、使用 event.stopPropagation() 阻止事件冒泡

那么，如何阻止事件冒泡呢？答案是使用 event.stopPropagation() 方法。

element.addEventListener('click', function(event) {
  event.stopPropagation();
});

上面的代码是在一个元素上添加 click 事件，当事件被触发时，调用 event.stopPropagation() 方法就可以阻止事件冒泡。这个方法只需要在事件处理函数中调用一次即可。

三、使用 event.stopImmediatePropagation() 阻止事件冒泡和取消事件委托

除了 event.stopPropagation() 方法，还有一个方法可以同时阻止事件冒泡和取消事件委托，那就是 event.stopImmediatePropagation() 方法。

element.addEventListener('click', function(event) {
  event.stopImmediatePropagation();
});

上面的代码同样是在一个元素上添加 click 事件，当事件被触发时，调用 event.stopImmediatePropagation() 方法就可以同时阻止事件冒泡和取消事件委托。需要注意的是，这个方法会阻止所有后续的事件处理函数执行，因此需要慎重使用，避免影响其他事件处理。

四、使用事件委托进行阻止事件冒泡

除了在单个元素上直接添加事件处理函数，我们还可以使用事件委托的方式为多个元素添加事件处理函数，同时也可以阻止事件冒泡。

parentElement.addEventListener('click', function(event) {
  if (event.target.matches('.childElement')) {
    event.stopPropagation();
    // do something
  }
});

上面的代码中，我们给父元素添加了 click 事件处理函数，当事件被触发时，首先判断事件源是否匹配到了指定的子元素，如果匹配成功，就调用 event.stopPropagation() 方法阻止事件冒泡并进行后续处理。

五、事件冒泡的应用场景

虽然事件冒泡有时候会引起麻烦，但是在某些场景下，事件冒泡也是非常有用的。下面是一些事件冒泡的应用场景：

  1. 表单验证：我们可以在 form 元素上添加 submit 事件处理函数，当表单提交时，先触发 form 元素的 submit 事件，再触发每个子元素的 submit 事件。如果有任何一个子元素的 submit 事件返回 false，整个表单就会被阻止提交。
  2. 事件委托：通过为父元素添加事件处理函数，可以监听到其所有子元素的事件，不需要为每个子元素都添加事件处理函数，从而提高事件处理的效率。
  3. 框架开发：在框架开发中，我们经常需要让组件模块化开发，这时候就需要使用事件冒泡来实现组件间的通信。具体实现可以参考 Vue 框架的 $emit 方法和 $on 方法。
推荐文章