e.stopPropagation() 能阻止标签页切换时的事件冒泡，但失效主因是事件未绑定到正确元素、绑定过早或父容器使用捕获阶段监听（addEventListener('click', h, true)），此时需统一阶段或改用事件委托。
e.stopPropagation() 能拦住标签页切换时的冒泡，但前提是它真被调用了——多数失效不是 API 问题，而是事件根本没绑到对的元素上，或绑早了、绑错了阶段。
为什么给 tab 按钮加 stopPropagation() 还是触发了父级切换逻辑
最常见原因是：你监听的是子元素（比如 <button class="tab-btn"></button>），但父容器（比如 <div class="tabs-container">）用的是捕获阶段监听：<code>addEventListener('click', handler, true)。此时 stopPropagation() 在冒泡阶段调用已无效——事件在到达按钮前，父容器的捕获回调早就执行完了。
- 检查父容器是否用了第三个参数
true；如果是，要么把它改成false或省略，要么在子按钮里也用捕获阶段并提前调用e.stopPropagation() - 确认按钮 DOM 已挂载：如果用 JS 动态生成 tab 按钮，别在插入前就绑定事件，否则监听器压根没生效
- 用浏览器开发者工具的 Event Listeners 面板，点选按钮元素，看
click监听器是否真实存在且位置正确
React 中 tab 切换阻止冒泡的写法陷阱
React 的合成事件系统下，e.stopPropagation() 依然有效，但 return false 完全没用——它既不阻止冒泡也不阻止默认行为。
- ✅ 正确：
onClick={(e) => { e.stopPropagation(); setActiveTab('home'); }} - ❌ 错误：
onClick={() => e.stopPropagation()}（e未定义） - ❌ 错误：
onClick={handleClick}（函数签名没接收e，拿不到事件对象） - ⚠️ 注意：不要在
handleClick外层再包一层箭头函数却漏传e，比如onClick={() => handleClick()}
<dialog></dialog> 标签做 tab 弹窗时点击穿透怎么防
如果用 <dialog></dialog> 实现 tab 内容浮层，点关闭按钮后弹窗闪一下又出现，大概率是关闭事件冒泡到了外层“打开弹窗”的按钮上——比如你在 <button onclick="openDialog()"></button> 里嵌了 <dialog></dialog>。
立即学习“前端免费学习笔记（深入）”；
- 关闭按钮的处理函数第一行必须是
e.stopPropagation()，不能只靠preventDefault()或内联onclick="return false" -
<dialog></dialog>应该是的直接子元素；嵌套在可点击容器里会导致焦点、backdrop 和事件流异常 - Safari 15.4–16.3 中
e.target可能始终是body，需 fallback 判断坐标：e.clientX 等方式辅助识别点击是否落在 backdrop 区域
真正容易被忽略的点是：很多“标签页”交互根本不需要阻止冒泡——用事件委托 + e.target 判断更安全。比如父容器监听 click，内部只响应带 data-tab 属性的按钮，其余点击无视。这样既避免传播干扰，又不用在每个按钮上重复加拦截逻辑。
