现代框架中HTML全局事件处理属性的冒泡屏蔽与委托策略

先泼一盆冷水：onclick="return false" 这种写法，在 React 或 Vue 里基本就是个摆设。框架用虚拟 DOM 替代了真实元素，内联事件属性要么被忽略，要么被框架自己的事件系统覆盖。统一走 addEventListener 绑定的路，所以原生 onclick 根本没机会执行。

onclick="return false" 为什么在 React/Vue 里失效

它根本没机会执行——现代框架用虚拟 DOM 替换了原生元素，onclick 这类内联属性在组件渲染时被忽略或覆盖，框架内部统一用 addEventListener 绑定事件。即使你硬写上去，React 的 onClick 或 Vue 的 @click 会接管并屏蔽它。

真正生效的是框架提供的事件处理方式：event.stopPropagation() 在回调里调用才起作用；return false 在 React 中等价于什么也不做，在 Vue 中仅阻止默认行为（不阻断冒泡）。

• React：必须写 event.stopPropagation()，且确保不是在合成事件池外访问 event 对象
• Vue：推荐用修饰符 @click.stop，比手写 event.stopPropagation() 更安全、更语义化
• 不要混用原生 onclick 和框架绑定，容易造成监听器冲突或丢失

addEventListener 第三个参数设为 true 能不能阻止冒泡

不能。设 true 只是让你的回调在捕获阶段执行（从 document 往下），事件仍会继续走目标阶段、再进入冒泡阶段。很多人误以为“用了捕获就自动隔离了”，其实只是监听时机变了，传播路径完全没变。

想真正中断传播，必须显式调用 event.stopPropagation() —— 而且要注意它只对当前阶段之后的路径有效：在捕获阶段调用，能拦住目标和冒泡；在目标或冒泡阶段调用，只拦住向上部分。

• 同一元素上同时注册捕获和冒泡监听器，会按注册顺序触发：捕获 → 目标 → 冒泡
• event.stopImmediatePropagation() 才能跳过同阶段其他监听器，比如防第三方脚本干扰
• IE8 及更早版本不支持 useCapture 参数，但现代项目基本无需兼容

事件委托该绑在 document 还是具体父容器

绑 document 是最常见错误。虽然它“永远存在”，但冒泡路径太长，e.target.closest('.item') 查找开销大，尤其在复杂 DOM 下性能明显下降；而且一旦页面用 innerHTML = '' 或 replaceChildren() 替换整块结构，监听器还在，但目标元素已销毁，逻辑就断了。

正确做法是选一个稳定、层级适中、生命周期与目标元素一致的父容器，比如

。它既避免了深度遍历，又不会因局部重绘而失活。

• 移动端需同时处理 touchstart 和 click，但别双绑——优先监听 touchstart 并传 { passive: false }，再 fallback 到 click 加简单防抖
• 委托时永远用 e.target.closest(selector)，别手动 while 循环判断匹配
• 如果父容器本身要响应滚动或拖拽，注意 passive: false 可能导致滚动卡顿，需权衡

stopPropagation() 最容易被忽略的副作用

它不区分“业务逻辑”和“基础设施逻辑”。比如你在模态框按钮里调了 event.stopPropagation()，看似解决了点击穿透，却可能让外层滚动容器收不到事件、全局快捷键失效、甚至屏幕阅读器焦点管理中断。

更轻量的做法往往是条件判断而非拦截：用 e.target === e.currentTarget 区分是否点在容器自身；或用 CSS pointer-events: none 让遮罩层透传点击；或者直接委托到父级，靠 e.target.matches('.close-btn') 做精准响应。

• 滥用 stopPropagation() 是调试中最难追溯的问题之一——现象是“某处功能突然不响应”，但根源可能在几层外的某个按钮里
• 第三方 UI 库（如 Ant Design、Element Plus）内部大量依赖冒泡实现联动，强行截断会导致意料外的行为
• 真正需要拦截时，优先检查是否可通过结构或样式规避，而不是第一时间加 stopPropagation()