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>

相关问题

vue3 addeventlistener

在Vue 3中，你可以使用v-on指令来添加事件监听器。v-on指令用于绑定一个事件，并指定一个处理函数。以下是一个示例：

<template>
  <button v-on:click="handleClick">Click me</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      // 处理点击事件的逻辑
    }
  }
}
</script>

在上面的例子中，我们给按钮绑定了一个点击事件，并将其与`handleClick`方法关联。当点击按钮时，`handleClick`方法会被调用。

除了`v-on:click`，Vue 3还支持其他常见的事件监听器，例如`v-on:input`、`v-on:keydown`等。你可以根据需要选择合适的事件监听器来满足你的需求。同时，你还可以使用修饰符来对事件进行进一步地控制，例如阻止默认行为或停止事件冒泡。

Vue3 - Element Plus 下拉菜单 el-dropdown 阻止冒泡传递到上层触发事件，解决 dropdown 下拉菜单组件被容器元素包裹时点击事件触发，会连带触发外层包裹容器的点击事件

在Vue3中，Element Plus的下拉菜单`el-dropdown`默认情况下，它的点击事件会被冒泡到其父元素，这可能导致外部容器接收到点击事件而误操作。要阻止这种冒泡，你需要利用自定义指令或者阻止事件的默认行为。

1. **使用v-model绑定**: 在`el-dropdown`上添加`@click.stop="handleClick"`，并定义`handleClick`函数来处理点击事件，同时使用`.stop`阻止事件向上冒泡：

<template>
  <el-dropdown v-model="isDropdownOpen" @click.stop>
    <span slot="trigger">点击展开</span>
    <el-dropdown-menu>
      <!-- 下拉菜单内容 -->
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
export default {
  data() {
    return {
      isDropdownOpen: false,
    };
  },
  methods: {
    handleClick(e) {
      // 如果不需要进一步处理，可以置空或返回false
      e.stopPropagation();
    },
  },
};
</script>

2. **使用自定义指令**: 创建一个自定义指令如`no-bubbling`，然后在需要阻止冒泡的地方应用它：

<template>
  <el-dropdown no-bubbling @click="handleClick">
    <!-- ... -->
  </el-dropdown>
</template>

<script>
Vue.directive('noBubbling', {
  bind(el, binding, vnode) {
    el.addEventListener('click', (e) => {
      e.stopPropagation();
    });
  }
});
// 然后在组件内使用
</script>

以上两种方式都可以有效防止`el-dropdown`的点击事件传播到上一层容器，从而避免意外触发。