当前位置：首页 > 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 修饰符。

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

注意事项

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

vue实现事件捕获

标签: 事件 vue

分享给朋友：

vue实现div

Vue 实现 DIV 元素的方法在 Vue 中实现 DIV 元素可以通过多种方式，以下是几种常见的实现方法：使用模板语法在 Vue 的模板中直接使用 HTML 的 <div> 标…

vue实现框架

Vue 框架实现的核心方法基础项目搭建使用 Vue CLI 或 Vite 快速初始化项目。Vue CLI 适合传统项目，Vite 更适合现代轻量级应用。安装后通过命令行工具选择所需配置（如 Rou…

vue实现xss

XSS 攻击简介 XSS（跨站脚本攻击）是一种常见的安全漏洞，攻击者通过注入恶意脚本到网页中，当其他用户访问该页面时，脚本会在其浏览器中执行，可能导致数据泄露或会话劫持。 Vue 中的 XSS…

vue实现键盘

Vue 实现键盘功能在Vue中实现键盘功能通常涉及监听键盘事件、处理输入以及渲染虚拟键盘界面。以下是几种常见的实现方式：监听键盘事件通过@keydown或@keyup指令监听键盘事件，适用于…

vue 实现滚动

实现滚动的基本方法在Vue中实现滚动效果可以通过多种方式完成，包括使用原生JavaScript、CSS或第三方库。以下是一些常见的方法：使用window.scrollTo方法实现页面滚动可以通…

vue实现排序

Vue 实现排序的方法在 Vue 中实现排序可以通过多种方式完成，以下是一些常见的方法：使用计算属性排序数组计算属性非常适合对数据进行排序，因为它会在依赖的数据变化时自动更新。以下是一个示例：…

vue实现事件捕获