如何通过 addEventListener 的 capture 参数提前拦截全局交互行为-js教程-PHP中文网

捕获阶段监听器可在事件到达目标前拦截处理，通过addEventListener第三个参数设为true实现；其按添加顺序执行，早于目标监听器，且stopPropagation无法阻止已触发的捕获监听器，而stopImmediatePropagation可终止同阶段其余监听器。

如何通过 addeventlistener 的 capture 参数提前拦截全局交互行为

可以通过将 addEventListener 的第三个参数设为 true（即开启捕获阶段），在事件到达目标元素之前就拦截并处理它，从而提前干预全局交互行为，比如阻止默认操作、统一记录用户行为或覆盖原生逻辑。

capture 参数的作用机制

DOM 事件分三个阶段：捕获 → 目标 → 冒泡。默认情况下（capture = false）监听器只在冒泡阶段触发；设为 true 后，监听器会在捕获阶段从 window 或 document 开始，逐层向下传递到目标元素前就执行。

捕获阶段的监听器比目标元素自身的监听器更早运行
即使目标元素调用 event.stopPropagation()，也无法阻止已进入捕获阶段的上层监听器执行
多个捕获监听器按添加顺序执行（先添加的先触发）

在 document 或 window 上全局拦截

最常用方式是在 document 或 window 上绑定捕获监听器，覆盖默认交互逻辑：

// 阻止所有右键菜单
document.addEventListener('contextmenu', (e) => {
  e.preventDefault();
}, true); // ✅ 捕获阶段生效

// 拦截所有点击，做权限检查或埋点
document.addEventListener('click', (e) => {
  if (!userHasPermission(e.target)) {
    e.stopImmediatePropagation(); // 阻止后续监听器（含冒泡阶段）
    showPermissionTip();
  }
}, true);