React 使用带有单个事件侦听器的事件委托document来处理冒泡事件，例如本例中的“click”，这意味着无法停止传播；当您在 React 中与其交互时，真实事件已经传播。stopPropagation在 React 的合成事件上是可能的，因为 React 在内部处理合成事件的传播。

使用JSFiddle进行下面的修复。

在 jQuery 事件上react停止传播

使用Event.stopImmediatePropagation以防止你的其他（jQuery的在这种情况下）听众根被调用。它在 IE9+ 和现代浏览器中受支持。

stopPropagation: function(e){
    e.stopPropagation();
    e.nativeEvent.stopImmediatePropagation();
},

• 警告：侦听器按照它们被绑定的顺序被调用。React 必须在其他代码（此处为 jQuery）之前初始化才能使其工作。

jQuery 在 React 事件上停止传播

您的 jQuery 代码也使用事件委托，这意味着调用stopPropagation处理程序不会停止任何事情；该事件已经传播到document，并且将触发 React 的侦听器。

// Listener bound to `document`, event delegation
$(document).on('click', '.stop-propagation', function(e){
    e.stopPropagation();
});

为了防止传播到元素之外，侦听器必须绑定到元素本身：

// Listener bound to `.stop-propagation`, no delegation
$('.stop-propagation').on('click', function(e){
    e.stopPropagation();
});

编辑 (2016/01/14)：澄清委托仅用于冒泡的事件。有关事件处理的更多详细信息，React 的源代码具有描述性注释：ReactBrowserEventEmitter.js。

这仍然是一个有趣的时刻：

ev.preventDefault()
ev.stopPropagation();
ev.nativeEvent.stopImmediatePropagation();

如果您的函数由标签包装，请使用此构造

值得注意的是（从这个问题），如果你将事件附加到document，e.stopPropagation()不会有帮助。作为一种解决方法，您可以使用window.addEventListener()代替document.addEventListener，然后event.stopPropagation()将阻止事件传播到窗口。

我能够通过将以下内容添加到我的组件来解决这个问题：

componentDidMount() {
  ReactDOM.findDOMNode(this).addEventListener('click', (event) => {
    event.stopPropagation();
  }, false);
}

来自React 文档： 下面的事件处理程序由冒泡阶段的事件触发。要为捕获阶段注册事件处理程序，请附加 Capture。（强调）

如果您的 React 代码中有一个单击事件侦听器并且您不希望它冒泡，我认为您想要做的是使用onClickCapture而不是onClick. 然后，您将事件传递给处理程序并执行event.nativeEvent.stopPropagation()以防止本机事件冒泡到 vanilla JS 事件侦听器（或任何未响应的事件）。