React合成事件通过事件委托在document统一监听，依Fiber树向上遍历触发父组件处理器，复现DOM冒泡语义；e.stopPropagation()可阻止React内部冒泡但不影响原生事件流，onXxxCapture支持捕获阶段拦截。
React 的合成事件系统并不真正模拟浏览器原生的事件冒泡过程，而是通过事件委托统一管理，并在内部实现了一套与 DOM 冒泡行为一致的触发逻辑。它不是“模拟”冒泡，而是复现了冒泡语义——即从目标组件向上逐层调用父级事件处理器，直到根节点或被显式中断。
合成事件如何复现冒泡行为
React 在 document 上绑定统一的事件监听器（如 click），所有 JSX 中声明的事件（如 onClick）都由这套机制分发。当用户触发真实 DOM 事件后，React 根据虚拟 DOM 树结构，从触发元素开始，沿 Fiber 树向上遍历父组件，依次执行注册的事件处理函数——这个遍历路径与 DOM 冒泡路径一致，因此视觉和行为上等价于原生冒泡。
- 事件对象是
SyntheticEvent实例，封装了原生事件，提供跨浏览器兼容接口 -
e.target指向原生触发元素（可能与当前组件不一致） -
e.currentTarget始终指向当前绑定事件处理函数的 React 组件对应 DOM 节点（相当于原生中冒泡过程中的“当前阶段元素”）
阻止冒泡：stopPropagation() 有效但有边界
调用 e.stopPropagation() 会中断 React 内部的冒泡遍历，后续父组件的同类型事件处理器将不会执行。但它不影响原生 DOM 事件冒泡——因为 React 的事件委托本身已接管了事件流，原生冒泡通常已被 preventDefault 或委托机制隔离。
- ✅
e.stopPropagation()可阻止 React 合成事件向上分发 - ⚠️ 不影响 document 级原生监听器（除非你手动添加并没做干预）
- ❌
return false在 React 中无效，不具阻止作用
捕获阶段事件：onXxxCapture 支持提前拦截
React 提供捕获阶段绑定语法，如 onClickCapture，其执行时机早于冒泡阶段，可用于提前拦截或记录：
React 与 Next.js 性能优化指南，源自 Vercel 工程团队。适用于编写、审查或重构 React/Next.js 代码时使用。
立即学习“Java免费学习笔记（深入）”；
- 事件先从外层组件向下执行所有
onXxxCapture处理器 - 再从内层向上执行普通
onClick（冒泡阶段） - 在捕获阶段调用
e.stopPropagation()同样可阻止后续冒泡阶段执行
例如：<div onClickCapture={() => console.log('outer capture')} ><button onClick={() => console.log('button bubble')} >Click</button></div>，点击按钮时先打印 outer capture，再打印 button bubble。
注意：e.nativeEvent.stopPropagation() 一般不需要
虽然可以通过 e.nativeEvent 访问原生事件并调用其 stopPropagation()，但在绝大多数场景下无必要——React 的合成事件冒泡已足够控制。仅当你同时存在原生事件监听器（如直接用 addEventListener 绑定在 DOM 上）且需精确控制原生流时才考虑使用。
- 滥用
e.nativeEvent.stopPropagation()可能破坏 React 事件委托机制预期 - 优先使用
e.stopPropagation()（合成事件方法）即可满足 99% 的业务需求 - 避免混合使用 React 事件与原生
addEventListener，易引发行为不一致
