React根节点事件委托模式下stopPropagation的工作原理是什么？

你的困惑核心是把React合成事件的冒泡流程和原生DOM事件的冒泡流程混为一谈了，这也是很多React新手容易踩的坑。

1. React的事件委托不是直接绑根节点就完事 #

React确实会在根节点（比如#root）监听原生DOM事件，但它做的不止这些：当原生事件冒泡到根节点后，React会自己构建一套**合成事件（SyntheticEvent）**的处理流程——它会从触发事件的目标DOM元素开始，向上遍历React组件树，依次触发对应组件上绑定的合成事件处理函数。

简单说，原生事件是从DOM元素往根节点冒泡，而React的合成事件是React自己模拟的、从目标组件往根组件的冒泡流程，这俩是独立的。

2. stopPropagation只作用于合成事件流 #

你在组件事件处理函数里调用的e.stopPropagation()，阻止的是React合成事件的冒泡，不是原生DOM事件的冒泡。

拿你的例子来说：

<root>
  <container onClick={handleContainerClick}>
    <button onClick={handleButtonClick}>点击</button>
  </container>
</root>

• 点击按钮时，原生DOM事件会从button → container → root依次冒泡，React在root捕获到这个原生事件。
• 然后React启动合成事件流程：先调用handleButtonClick，如果这里调用了e.stopPropagation()，React就会终止合成事件的冒泡，不会再调用handleContainerClick。
• 但原生事件还是会继续冒泡到root（不过这时候React已经处理完合成事件了，不会有其他影响）。

3. 为什么你会觉得矛盾？ #

你误以为“事件要先冒泡到根节点才能触发处理函数”，但实际上React是在捕获到原生事件后，反向模拟了从目标到上层的合成事件触发顺序，所以即使你在子组件里阻止合成事件冒泡，上层组件的合成事件处理函数也不会被触发——这完全符合你的预期，和事件委托机制不矛盾。

如果要阻止原生事件的冒泡（比如影响根节点之外的原生事件监听），得用e.nativeEvent.stopPropagation()，但一般不推荐这么做，容易引发意外问题。

内容的提问来源于stack exchange，提问作者den330