当前位置：首页 > VUE

vue实现事件捕获

2026-02-18 22:24:51VUE

Vue 实现事件捕获的方法

在 Vue 中，默认情况下事件是通过冒泡机制传递的。如果需要实现事件捕获，可以通过原生 DOM 事件的方式或 Vue 的修饰符来实现。

使用原生 DOM 事件

通过 addEventListener 的第三个参数设置为 true，可以启用事件捕获模式。

<template>
  <div ref="parent" @click="handleClick">
    <div ref="child">Click me</div>
  </div>
</template>

<script>
export default {
  mounted() {
    this.$refs.parent.addEventListener('click', this.handleParentClick, true);
    this.$refs.child.addEventListener('click', this.handleChildClick, true);
  },
  methods: {
    handleParentClick() {
      console.log('Parent captured');
    },
    handleChildClick() {
      console.log('Child captured');
    },
    handleClick() {
      console.log('Bubbling event');
    }
  }
}
</script>

使用 Vue 的 `.capture` 修饰符

Vue 提供了 .capture 修饰符，可以简化事件捕获的实现。

<template>
  <div @click.capture="handleParentClick">
    <div @click.capture="handleChildClick">Click me</div>
  </div>
</template>

<script>
export default {
  methods: {
    handleParentClick() {
      console.log('Parent captured');
    },
    handleChildClick() {
      console.log('Child captured');
    }
  }
}
</script>

结合 `.stop` 修饰符阻止冒泡

如果需要在捕获阶段阻止事件继续传递，可以结合 .stop 修饰符。

vue实现事件捕获

<template>
  <div @click.capture.stop="handleParentClick">
    <div @click.capture="handleChildClick">Click me</div>
  </div>
</template>

注意事项

事件捕获的顺序是从外层到内层，与冒泡的顺序相反。
使用 .capture 修饰符时，事件处理函数会在捕获阶段触发，而不是默认的冒泡阶段。
如果同时使用了 .capture 和 .stop，事件会在捕获阶段被阻止，不会继续传递到目标元素或冒泡阶段。

标签: 事件 vue

分享给朋友：

vue实现granfana

Vue 实现类似 Grafana 的仪表盘要在 Vue 中实现类似 Grafana 的仪表盘功能，需要结合数据可视化库、状态管理和 UI 组件。以下是关键步骤和推荐工具：数据可视化库使用 E…

vue实现通知

Vue 实现通知功能的方法使用 Vue 实现通知功能可以通过多种方式实现，以下是一些常见的方法：使用 Vue 的全局事件总线在 Vue 中可以通过事件总线实现通知功能。创建一个全局事件总线，然…

computed vue 实现

computed 在 Vue 中的基本用法 Vue 的 computed 属性用于声明依赖于其他数据的计算属性。当依赖的数据变化时，计算属性会自动重新计算并缓存结果。 export defaul…

vue实现网站

Vue 实现网站的基本步骤 Vue.js 是一个渐进式 JavaScript 框架，适合构建现代化的单页应用（SPA）或动态网站。以下是使用 Vue 实现网站的基本方法。初始化 Vue 项目使用…

vue实现微云

Vue 实现微云功能使用 Vue 实现类似微云的网盘功能需要结合前端框架、后端存储及文件处理技术。以下是关键实现步骤和代码示例：前端框架搭建使用 Vue CLI 创建项目基础结构，安装必要依赖…

vue实现watch

监听数据变化在Vue中，watch用于监听响应式数据的变化并执行回调函数。基本语法如下： watch: { propertyName(newValue, oldValue) { //…

vue实现事件捕获