如何让document.addEventListener('click')在含stopPropagation的元素上生效？

问题根源 #

页面元素调用stopPropagation()会阻止事件在冒泡阶段向上传递，而默认的document.addEventListener('click', ...)是在冒泡阶段绑定监听，因此无法捕获这类被拦截的点击事件。

核心解决方案 #

将事件监听切换到捕获阶段执行。事件捕获的顺序是从最顶层的document向下传递到目标元素，不受目标元素的冒泡拦截影响。

修改后的代码：

document.addEventListener('click', (e) => {
  // 执行你的业务逻辑
  console.log('捕获到点击事件:', e);
}, true); // 关键：第三个参数设为true，开启捕获阶段监听

验证步骤 #

• 打开Bootstrap 4下拉组件页面
• 打开开发者工具控制台，输入上述代码
• 点击"Dropdown Button"，此时控制台会正常输出点击事件对象，问题解决。

补充说明 #

• 捕获阶段的监听优先级高于冒泡阶段，能绕过stopPropagation()的冒泡拦截
• 该方法在Chrome扩展的内容脚本中完全适用，无需额外权限配置

内容的提问来源于stack exchange，提问作者coure2011