捕获阶段监听document点击是唯一能在组件逻辑执行前拦截敏感操作的时机，必须用true参数、标记data-sensitivity属性、避免stoppropagation误伤交互，并兼容iframe和safari等边界情况。
直接在 document 上绑定捕获阶段事件监听器，就能在任何组件的 click 处理函数执行前拦截点击——但必须避开 button、a 等原生可交互元素的默认行为干扰，否则会误杀表单提交或跳转。
为什么不能只用冒泡阶段监听
React/Vue 组件内注册的 onClick 默认走冒泡阶段，等事件到达目标元素再触发。此时敏感操作（如“删除账户”按钮点击）的逻辑早已进入组件状态更新队列，甚至开始发请求。捕获阶段是唯一能在事件路径最顶端（document → body → … → 目标）就截停的机会。
常见错误现象：document.addEventListener('click', handler) 没传第三个参数 true，结果 handler 总是晚于组件逻辑执行；或者监听了 body 而非 document，漏掉模态框、Portal 渲染的浮层元素。
- 必须写成
document.addEventListener('click', handler, true) - 不要用
event.stopPropagation()全局阻止，否则会破坏下拉菜单、Tooltip 等依赖冒泡的交互 - 优先用
event.preventDefault()阻止默认行为，再根据条件决定是否event.stopImmediatePropagation()
如何精准识别“敏感操作”而非普通点击
不能靠 class 名或 textContent 粗暴匹配，因为组件可能动态生成 DOM、使用 i18n、或把按钮逻辑抽到自定义 Hook 里。真正可靠的依据是 DOM 属性标记 + 行为语义。
推荐做法：要求所有敏感操作触发点（按钮、链接、图标按钮）显式添加 data-sensitivity="high" 或 data-action="delete-account" 这类属性，而不是事后扫描文本内容。
- 检查
event.target及其所有父级元素是否有data-sensitivity属性值为"high"或"critical" - 对
<a href="https://www.php.cn/link/acd4dbc10fbfd65a25eda61b46fc7820"></a>这类带敏感 API 路径的链接，用正则匹配event.target.getAttribute('href')是否含/delete|/revoke|/wipe - 避免检查
innerText—— 多语言切换后文案变化，或按钮用了 SVG 图标无文字，就会失效
拦截后该做什么：验证、延迟还是取消
拦截本身不是目的。用户点了“永久删除”，你得弹二次确认；点了“导出全部数据”，得先检查权限；点了“切换生产环境”，得强制输入 MFA 动态码。这些动作不能在捕获阶段完成，必须移交到业务逻辑层。
推荐解耦方式：在捕获 handler 中不执行具体业务，而是抛出自定义事件，由全局守卫模块统一响应。
document.addEventListener('click', (e) => {
const el = e.target.closest('[data-sensitivity="high"]');
if (el) {
e.preventDefault();
e.stopImmediatePropagation();
// 抛出可被 Vue/React 监听的自定义事件
document.dispatchEvent(new CustomEvent('sensitive-click', {
detail: { element: el, action: el.dataset.action }
}));
}
}, true);
- Vue 场景：在根组件用
@sensitive-click="handleSensitive"响应 - React 场景：用
useEffect(() => { document.addEventListener('sensitive-click', ...); }, []) - 绝不在此处调用
fetch或修改localStorage—— 捕获阶段没有 React 的setState上下文，也不该耦合具体框架
容易被忽略的兼容性陷阱
iFrame 内的点击事件不会冒泡到父文档，捕获监听器也收不到。如果敏感操作发生在嵌入的管理后台 iframe 里（比如财务系统嵌在主站中），这个方案完全失效。
另外，Safari 对 stopImmediatePropagation() 在捕获阶段的支持曾有 Bug（iOS 15.4 之前），表现为部分按钮点击后既没触发业务逻辑，也没触发默认跳转——必须降级为仅 preventDefault() + 同步弹窗阻断。
- 检测 iframe 场景：用
if (window.self !== window.top)判断当前是否在 iframe 中，若是，改用window.parent.postMessage通知顶层窗口 - Safari 兼容 fallback：对
navigator.userAgent.includes('Safari') && !navigator.userAgent.includes('Chrome')的环境，放弃stopImmediatePropagation()，改用setTimeout(() => { /* 弹窗 */ }, 0)延迟干预 - 移动端 touch 事件不触发 click 捕获，需额外监听
touchstart并手动映射，但注意防止双触发（touchstart + click）
真正难的从来不是加监听器，而是让拦截逻辑跟得上组件动态渲染、跨 iframe 边界、以及浏览器碎片化的事件模型。别指望一个 addEventListener 一劳永逸。
