在 Vue 中使用 .capture 修饰符可将事件监听器提前至捕获阶段执行，即从外层父元素由上至下触发；如 <div @click.capture="handleOuter"><button @click="handleInner">点我</button></div>，点击按钮时先执行 handleOuter 再执行 handleInner。

在 Vue 模板中启用事件捕获模式，只需在 @click（或其他事件）后添加 .capture 修饰符即可。它会把事件监听器从默认的冒泡阶段提前到捕获阶段执行——也就是从外层父元素开始，由上至下逐级触发，而不是点击目标后再向上冒泡。

直接加 .capture 就生效

不需要额外配置或 JS 手动调用 addEventListener 的第三个参数 true，Vue 已封装好底层逻辑：

• <div @click.capture="handleOuter"><button @click="handleInner">点我</button></div>
• 点击按钮时，先执行 handleOuter（捕获阶段），再执行 handleInner（目标阶段）
• 注意：.capture 只影响绑定它的那个元素的监听时机，不改变子元素事件本身的传播路径

适合用 capture 的典型场景

不是所有点击都要加 .capture，关键看是否需要“父级优先响应”：

vue-composition-api-best-practices

Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。

下载

• 全局快捷键拦截（比如按 Esc 关闭弹窗，希望外层遮罩层第一时间捕获）
• 嵌套容器中需区分“操作区域”和“内容区域”，且父容器逻辑必须先于子组件执行
• 第三方组件内部无法修改事件绑定，但你希望在外层统一拦截某些行为（如表单提交前做权限校验）

capture 可以和其他修饰符组合

多个修饰符连写时，顺序决定执行顺序，常见有效组合有：

立即学习“前端免费学习笔记（深入）”；

• @click.capture.stop：捕获阶段触发，并阻止事件继续向下（或向上）传播
• @click.capture.self：只在捕获阶段、且事件真正发生在该元素自身时才触发（target === currentTarget）
• @click.stop.capture 和 @click.capture.stop 效果相同，Vue 会自动归一化为后者顺序

注意事项

避免常见误解：

• .capture 不等于 .stop：它只是切换监听阶段，不会阻止传播；若要彻底拦截，得搭配 .stop
• 不能在子元素上单独加 .capture 来“让父元素捕获”——必须在父元素上加，才能让它在捕获阶段被触发
• 如果父子都加了 .capture，会按 DOM 结构从外到内依次触发（最外层最先）