先泼一盆冷水：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()
