addEventListener阻止事件冒泡

addEventListener方法是JavaScript中用于为DOM元素添加事件监听器的方法，它可以帮助你控制事件的传播过程。当事件冒泡（也称事件流）发生时，从最具体的元素开始，逐级向上直至文档对象（Window）触发。如果你想在某个特定层级阻止事件继续向上冒泡，可以在事件监听器中使用`event.stopPropagation()`。

`event.stopPropagation()`方法的作用是停止事件在其当前捕获阶段的传播，这意味着后续的父元素将不会接收到这个事件，即使它们也绑定了相同的事件处理程序。这样，你就可以在子元素上执行操作，而不会影响到整个父级的逻辑。

例如：

element.addEventListener('click', function(event) {
  // 如果不想让点击事件继续冒泡到父元素
  event.stopPropagation();
  // 在这里执行自己的处理代码
}, false);

相关问题

vue3 addEventListener阻止冒泡

在Vue3中，可以使用`@click.stop`来阻止事件冒泡。也可以在事件处理函数中使用`event.stopPropagation()`来阻止事件冒泡。

示例代码如下：

<template>
  <div @click="outerClick">
    <div @click.stop="innerClick"></div>
  </div>
</template>

<script>
export default {
  methods: {
    outerClick() {
      console.log('outer click')
    },
    innerClick(event) {
      event.stopPropagation()
      console.log('inner click')
    }
  }
}
</script>

js事件冒泡，阻止事件冒泡

JavaScript事件冒泡是指事件从最具体的元素开始，逐级向上传播到最不具体的元素。如果不阻止事件冒泡，事件会在元素层次结构中所有祖先元素中都被触发。可以使用`event.stopPropagation()`方法来阻止事件冒泡。

示例代码如下：

document.getElementById("child").addEventListener("click", function(event){
    alert("child clicked");
    event.stopPropagation();
});

document.getElementById("parent").addEventListener("click", function(){
    alert("parent clicked");
});

在上面的代码中，当单击“child”元素时，只会触发“child clicked”弹出框，而不会触发“parent clicked”弹出框。这是因为`event.stopPropagation()`方法阻止了事件冒泡。