React合成事件默认支持冒泡，应优先使用e.stopPropagation()阻止其在React事件系统内向上传递；e.preventDefault()仅取消默认行为，不能阻止冒泡；仅当需拦截原生监听器时才操作nativeEvent。
React 的合成事件（SyntheticEvent）中，事件冒泡行为和原生 DOM 事件一致，但控制方式略有不同——关键在于 不能直接用原生方法如 e.stopPropagation() 后再调用 e.nativeEvent.stopImmediatePropagation()，而应优先使用 e.stopPropagation() 即可阻止 React 事件系统向上传递。
React 合成事件默认支持冒泡
React 中的 onClick、onMouseEnter 等事件都是基于合成事件系统封装的，它们在底层仍依赖原生事件，并默认开启冒泡。例如点击子元素时，父组件的 onClick 也会触发：
<div onClick={() => console.log('父级')}>
<button onClick={() => console.log('按钮')}>点我</button>
</div>
点击按钮后，控制台会依次输出“按钮”、“父级”，说明冒泡发生了。
用 e.stopPropagation() 阻止 React 事件冒泡
这是最常用、也最推荐的方式。它阻止的是 React 合成事件系统内的传播，不影响原生事件监听器（除非你额外处理）：
已弃用 — 请改用 `auth0` 技能（运行 `npx clawhub install auth0`）。适用于为 React 单页应用（SPA）添加 Auth0 登录、登出、受保护路由或用户会话功能。该技能集成 `@auth0/auth0-react` — 即使用户仅表述为“为我的 React 应用添加登录功能”或“保护我的 React 路由”，而未明确提及 Auth0，也应使用此技能。
立即学习“Java免费学习笔记（深入）”；
- 在子元素事件处理器中调用
e.stopPropagation()，父组件的同类型 React 事件就不会被触发 - 注意：它不会阻止同一个元素上多个同类型事件监听器的执行（如两个
onClick），但 React 不允许同一元素绑定多个同名事件处理器，所以这点通常不构成问题 - 不需要也不建议混用
e.nativeEvent.stopImmediatePropagation()，除非你明确需要同时阻断原生监听器
需要拦截原生事件冒泡时才操作 nativeEvent
当父容器或 document 上有通过 addEventListener 添加的原生事件监听器（非 React 绑定），而你希望连它也跳过时，才需干预原生事件：
- 调用
e.nativeEvent.stopImmediatePropagation()可阻止该原生事件继续派发给其他监听器 - 调用
e.nativeEvent.stopPropagation()则只阻止冒泡，不影响同阶段其他监听器 - 一般场景下，仅用
e.stopPropagation()就已足够；过度操作 nativeEvent 容易引发兼容性或维护问题
避免误用 e.preventDefault()
e.preventDefault() 和冒泡无关，它只取消事件默认行为（如表单提交、链接跳转）。有人误以为它能阻止冒泡，其实不能。若你本意是阻止父组件响应点击，却只写了 e.preventDefault()，冒泡依然会发生。
