.capture修饰符用于在捕获阶段监听事件，等价于addeventlistener的{capture:true}；适用于需父元素优先响应的场景，如全局快捷键拦截、防止stoppropagation阻断、外层统一处理拖拽。

在 Vue 3 中，`.capture` 修饰符用于将事件监听器绑定到**捕获阶段**，而不是默认的冒泡阶段。它等价于原生 addEventListener 的第三个参数设为 true。

什么时候需要 .capture

当你希望父元素在子元素之前接收到事件时使用。典型场景包括：

• 全局快捷键拦截（如按 Esc 关闭所有弹窗，需在根容器捕获，避免被子组件阻止）
• 防止子组件调用 stopPropagation() 后父逻辑完全收不到事件
• 嵌套可拖拽区域中，由外层统一处理拖拽起始判断

基本写法与效果

直接在事件指令后添加 .capture 即可：

<div>
  <button>点我</button>
</div>

此时点击按钮，执行顺序是：handleRootClick → handleBtnClick（捕获阶段先触发父级，再进入目标和冒泡阶段）。

Vue

避免 Vue 常见错误——响应式陷阱、ref 与 reactive 区别、计算属性时机及 Composition API 陷阱。

下载

与其他修饰符组合的注意事项

.capture 可以和 .stop、.prevent 等共存，但要注意执行顺序：

• 修饰符从左到右依次生效，@click.capture.stop 表示：先进入捕获阶段 → 触发处理器 → 立即调用 stopPropagation()
• 它不能和 .passive 同时使用，因为 passive 明确禁止调用 preventDefault()，而捕获阶段通常用于前置干预，二者语义冲突
• .self 在捕获模式下仍有效：@click.capture.self 只有点击该 div 自身（而非子元素）才会触发

和原生 addEventListener 的对应关系

Vue 编译后，@click.capture 会生成类似这样的代码：

element.addEventListener('click', handler, { capture: true })

这意味着它不改变事件本身，只是调整监听时机。DOM 事件流仍遵循「捕获 → 目标 → 冒泡」三阶段，Vue 只是帮你省去了手动配置 { capture: true } 的模板冗余。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！