vue阻止事件冒泡和事件捕获

<template>
  <div id="app">
    <!-- 阻止事件冒泡 -->
    <div @click="handleOuterClick" class="outer">
      Outer Div
      <div @click.stop="handleInnerClick" class="inner">
        Inner Div
      </div>
    </div>

    <!-- 使用事件捕获 -->
    <div @click.capture="handleCaptureClick" class="capture-outer">
      Capture Outer Div
      <div @click="handleBubbleClick" class="capture-inner">
        Capture Inner Div
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    handleOuterClick() {
      console.log('Outer div clicked');
    },
    handleInnerClick() {
      console.log('Inner div clicked, but event bubbling is stopped');
    },
    handleCaptureClick() {
      console.log('Capture phase: Outer div clicked');
    },
    handleBubbleClick() {
      console.log('Bubbling phase: Inner div clicked');
    }
  }
};
</script>

<style scoped>
.outer, .capture-outer {
  padding: 20px;
  border: 1px solid black;
  margin: 10px;
}
.inner, .capture-inner {
  padding: 20px;
  border: 1px solid red;
}
</style>

解释说明

1. 阻止事件冒泡：

   • 在 Inner Div 的点击事件中使用了 .stop 修饰符 (@click.stop)，这会阻止事件冒泡到父级元素。因此，当点击 Inner Div 时，只会触发 handleInnerClick 方法，而不会触发 handleOuterClick 方法。

2. 事件捕获：

   • 在 Capture Outer Div 上使用了 .capture 修饰符 (@click.capture)，这使得点击事件在捕获阶段就会被处理。因此，当点击 Capture Inner Div 时，首先会触发 handleCaptureClick 方法，然后才会触发 handleBubbleClick 方法。

通过这两种方式，你可以灵活地控制事件的传播行为。