当前位置：首页 > 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实现弹窗

Vue 实现弹窗的常见方法使用组件化方式封装弹窗创建一个独立的弹窗组件（如 Modal.vue），通过 v-if 或 v-show 控制显示隐藏： <template> <…

vue实现盖章

Vue 实现盖章功能在Vue中实现盖章功能通常涉及前端UI交互，通过Canvas或SVG绘制印章，并允许用户拖拽或点击放置印章。以下是具体实现方法：使用Canvas绘制印章通过HTML5的Ca…

vue实现webapp

Vue 实现 WebApp 的基本步骤环境准备确保已安装 Node.js 和 npm/yarn。通过 Vue CLI 或 Vite 创建项目： npm install -g @vue/cli v…

vue实现gridlayout

Vue 实现 Grid Layout 使用 CSS Grid 布局 CSS Grid 是一种强大的布局系统，可以直接在 Vue 组件的样式中使用。通过定义网格容器和网格项，可以快速实现复杂的布局结构。…

react实现vue

React 实现 Vue 功能 React 和 Vue 是两种不同的前端框架，但可以通过一些方法在 React 中实现 Vue 的特性。以下是几种常见 Vue 功能在 React 中的实现方式：双…

vue rooter 实现原理

Vue Router 实现原理 Vue Router 是 Vue.js 官方的路由管理器，用于构建单页面应用（SPA）。其核心实现原理包括路由匹配、组件渲染和导航守卫等机制。路由匹配与动态路由 V…

vue实现事件捕获