.vue中.capture修饰符使事件处理器在捕获阶段执行，即浏览器事件流的捕获→目标→冒泡三阶段中最早阶段，由外向内触发，用于提前拦截事件，常见于全局快捷键、遮罩层关闭及统一流量监控等场景。
Vue 中的 .capture 修饰符用于让事件处理器在捕获阶段执行，而不是默认的冒泡阶段。它本质是启用原生 DOM 的事件捕获机制，使外层元素能“提前拦截”事件，在事件到达目标前就响应。
什么是捕获阶段？
浏览器事件流分三个阶段：捕获 → 目标 → 冒泡。
默认情况下（不加 .capture），Vue 的事件监听器只在目标阶段或冒泡阶段触发；
加上 @click.capture 后，监听器会在捕获阶段从最外层祖先向下传递时就被触发。
怎么写 .capture 修饰符？
语法很简单：在事件绑定后加 .capture 即可，例如：
<div @click.capture="handleParent"><button @click="handleChild">点我</button>
注意：.capture 只作用于当前绑定的元素，不影响子元素是否冒泡，也不改变子元素自身的监听时机。
捕获和冒泡混合时的执行顺序
当多个嵌套元素同时使用 .capture 和普通绑定时，执行顺序遵循标准事件流规则：
立即学习“前端免费学习笔记（深入）”；
- 先执行所有 捕获阶段 的处理器（由外向内）
- 再执行 目标阶段 的处理器（即点击的那个元素）
- 最后执行 冒泡阶段 的处理器（由内向外）
示例：
<div @click.capture="log('outer-capture")>
outer
<div @click.capture="log('inner-capture')">
inner
<button @click="log('target')">click</button>
</div>
</div>
点击 button 时输出顺序为：
outer-capture → inner-capture → target
常见使用场景
-
全局快捷操作拦截：比如在根容器上用
@keydown.capture拦截 Esc 键关闭弹窗，避免被子组件事件干扰 -
防止误触穿透：模态框外层遮罩层用
@click.capture关闭弹窗，确保即使点击内部表单也能优先响应遮罩逻辑 - 统一日志或权限校验：在布局容器上捕获用户交互，做埋点或操作前检查，无需每个按钮重复写
