vue实现事件捕获

Vue 中实现事件捕获的方法

在 Vue 中，默认情况下事件是通过冒泡机制传递的。如果需要实现事件捕获，可以通过以下方式：

使用 .capture 修饰符

Vue 提供了 .capture 事件修饰符来实现事件捕获。这个修饰符会在捕获阶段处理事件，而不是默认的冒泡阶段。

<div @click.capture="handleCapture">
  <button @click="handleClick">Click me</button>
</div>

在这个例子中，当点击按钮时，handleCapture 会在捕获阶段先触发，然后才是 handleClick 在冒泡阶段触发。

原生 JavaScript 的 addEventListener

如果需要在 Vue 中直接使用原生 JavaScript 的事件捕获机制，可以在生命周期钩子中操作：

export default {
  mounted() {
    this.$el.addEventListener('click', this.handleCapture, true)
  },
  beforeDestroy() {
    this.$el.removeEventListener('click', this.handleCapture, true)
  },
  methods: {
    handleCapture(event) {
      // 捕获阶段处理逻辑
    }
  }
}

addEventListener 的第三个参数设为 true 表示在捕获阶段处理事件。

自定义指令实现捕获

可以创建一个自定义指令来简化捕获事件的处理：

Vue.directive('capture', {
  bind(el, binding) {
    el.addEventListener(binding.arg, binding.value, true)
  },
  unbind(el, binding) {
    el.removeEventListener(binding.arg, binding.value, true)
  }
})

使用方式：

<div v-capture:click="handleCapture">
  <button @click="handleClick">Click me</button>
</div>

注意事项

事件捕获从最外层元素向内传播，而冒泡是从内向外传播。在复杂组件结构中，捕获机制可以帮助更早地拦截和处理事件。

在组件通信中，$emit 触发的事件默认不会参与 DOM 事件流，因此不会触发捕获或冒泡阶段。如果需要组件间的事件捕获效果，可以考虑使用 Vue 的 provide/inject 或全局事件总线等模式。