ReactJS SyntheticEvent stopPropagation（）仅适用于React事件吗？

我试图在ReactJS组件中使用event.stopPropagation（）来阻止单击事件冒泡并触发遗留代码中与JQuery关联的click事件，但是似乎React的stopPropagation（）只能停止传播到事件也附加在React中，并且JQuery的stopPropagation（）不会停止传播到随React附加的事件。

有什么办法可以使stopPropagation（）在这些事件中起作用？我编写了一个简单的JSFiddle来演示这些行为：

/** @jsx React.DOM */
var Propagation = React.createClass({
    alert: function(){
        alert('React Alert');
    },
    stopPropagation: function(e){
        e.stopPropagation();
    },
    render: function(){
        return (
            <div>
                <div onClick={this.alert}>
                    <a href="#" onClick={this.stopPropagation}>React Stop Propagation on React Event</a>
                </div>
                <div className="alert">
                    <a href="#" onClick={this.stopPropagation}>React Stop Propagation on JQuery Event</a>
                </div>
                <div onClick={this.alert}>
                    <a href="#" className="stop-propagation">JQuery Stop Propagation on React Event</a>
                </div>
                <div className="alert">
                    <a href="#" className="stop-propagation">JQuery Stop Propagation on JQuery Event</a>
                </div>
            </div>
        );
    }
});

React.renderComponent(<Propagation />, document.body);

$(function(){    
    $(document).on('click', '.alert', function(e){
        alert('Jquery Alert');
    });

    $(document).on('click', '.stop-propagation', function(e){
        e.stopPropagation();
    });
});

React使用事件委派和单个事件侦听器来启动document冒泡的事件，例如本示例中的“单击”，这意味着无法停止传播；当您在React中与真实事件互动时，真实事件已经传播了。stopPropagation由于React在内部处理合成事件的传播，因此可以对React的合成事件进行处理。

使用下面的修补程序来工作JSFiddle。

在jQuery事件上反应停止传播

使用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。

值得注意的是（从本期开始）如果您将事件附加到document，e.stopPropagation()将无济于事。解决方法是，您可以使用window.addEventListener()代替document.addEventListener，然后event.stopPropagation()阻止事件传播到窗口。

仍然是一个有趣的时刻：

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

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

通过将以下内容添加到我的组件中，我能够解决此问题：

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

我昨天遇到了这个问题，所以我创建了一个React友好的解决方案。

签出react-native-listener。到目前为止，它运行良好。反馈表示赞赏。

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

如果您在React代码中有一个click事件侦听器，并且不想让它突然冒泡，我想您要使用onClickCapture而不是onClick。然后，您将事件传递给处理程序，并event.nativeEvent.stopPropagation()进行处理，以防止本机事件冒泡至原始JS事件侦听器（或任何不响应的事件）。

更新：现在可以 <Elem onClick={ proxy => proxy.stopPropagation() } />

一个快速的解决方法是使用window.addEventListener而不是document.addEventListener。