vue点击事件阻止冒泡

作者：黑白灰调发布日期:2025-09-19 浏览:44

// 在 Vue 中阻止点击事件冒泡，可以使用修饰符 `.stop`

<template>
  <div @click="handleOuterClick">
    Outer Div
    <button @click.stop="handleInnerClick">Inner Button</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleOuterClick() {
      console.log('Outer div clicked');
    },
    handleInnerClick() {
      console.log('Inner button clicked');
    }
  }
};
</script>

<!-- 解释说明：
1. `@click.stop` 是 Vue 的事件修饰符之一，用于阻止事件冒泡。
2. 当你点击按钮时，只会触发 `handleInnerClick` 方法，而不会触发外层 `div` 的 `handleOuterClick` 方法。
3. 如果没有使用 `.stop` 修饰符，点击按钮时会同时触发内层和外层的点击事件。 -->

上一篇：vue props 默认值

下一篇：vue嵌入第三方页面