vueclick阻止事件冒泡

作者：__Man︶ㄣ发布日期:2026-04-15 浏览:84

<template>
  <div>
    <!-- 父元素 -->
    <div @click="handleParentClick">
      Parent Div
      <!-- 子元素，使用 .stop 阻止事件冒泡 -->
      <button @click.stop="handleChildClick">Child Button</button>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    handleParentClick() {
      console.log('Parent clicked');
    },
    handleChildClick() {
      console.log('Child clicked');
    }
  }
};
</script>

解释说明：

在 Vue 中，.stop 是一个修饰符，用于阻止事件冒泡。当子元素（如按钮）被点击时，事件不会传播到父元素。
@click.stop="handleChildClick" 表示当按钮被点击时，只会触发 handleChildClick 方法，而不会触发父级的 handleParentClick 方法。
如果没有 .stop 修饰符，点击按钮时会同时触发父级和子级的点击事件。

上一篇：vue select 组件

下一篇：vue nginx