vue阻止事件冒泡的方法

作者：嗜血苍狼发布日期:2026-06-15 浏览:69

<template>
  <div @click="handleDivClick">
    点击我
    <button @click.stop="handleButtonClick">点击按钮</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleDivClick() {
      console.log('div 被点击了');
    },
    handleButtonClick() {
      console.log('按钮被点击了');
    }
  }
};
</script>

解释说明：

在 Vue 中，可以通过 .stop 修饰符来阻止事件冒泡。
上述代码中，当点击按钮时，只会触发 handleButtonClick 方法，而不会触发父级 div 的 handleDivClick 方法，因为 .stop 修饰符阻止了事件冒泡到父元素。

上一篇：vue获取路由参数

下一篇：vue启动