vue 阻止事件冒泡

作者：血之メ狂霸发布日期:2025-06-13 浏览:43

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

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

解释说明：

在 Vue 中，事件冒泡是指当一个子元素上的事件被触发时，该事件会向上传播到父元素。
使用 .stop 修饰符可以阻止事件冒泡。在这个例子中，@click.stop 修饰符被添加到 button 元素上，因此当按钮被点击时，点击事件不会传播到父级的 div 元素。
如果你点击按钮，只会触发 handleButtonClick 方法，而不会触发 handleDivClick 方法。如果你点击 div 区域但不在按钮上，则只会触发 handleDivClick 方法。

上一篇：vue2 eventbus

下一篇：vue3 electron