Javascript ReactEvent stopPropagation（）仅适用于React事件？

我试图在ReactJS组件中使用event.stopPropagation（）来阻止click事件冒泡并触发旧代码中与JQuery一起附加的click事件，但React的stopPropagation（）似乎只停止传播到同样附加在React中的事件，而JQuery的stopPropagation（）则停止传播不会停止传播到附加了React的事件

有没有办法让stopPropagation（）在这些事件中工作？我写了一个简单的例子来演示这些行为：

/** @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();
    });
});

/**@jsx React.DOM*/
变量传播=React.createClass({
警报：函数（）{
警报（“反应警报”）；
},
停止播放：功能（e）{
e、 停止传播（）；
},
render:function（）{
返回(
);
}
});
React.renderComponent（，document.body）；
$（函数（）{
$（文档）.on（'click'，'.alert'，函数（e）{
警报（“Jquery警报”）；
});
$（文档）。在（'单击'，'停止传播'）上，函数（e）{
e、 停止传播（）；
});
});

React在

文档

中对冒泡的事件使用带有单个事件侦听器的事件委派，如本例中的“单击”，这意味着无法停止传播；当您在React中与真实事件交互时，真实事件已经传播<代码>对React的合成事件停止传播是可能的，因为React在内部处理合成事件的传播

使用下面的修复程序。 在jQuery事件上停止传播 用于防止根目录上的其他（本例中为jQuery）侦听器被调用。IE9+和现代浏览器都支持它

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

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

jQuery在React事件上停止传播 jQuery代码也使用事件委派，这意味着在处理程序中调用

stopPropagation

不会停止任何操作；事件已传播到

文档

，将触发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的源代码有描述性注释：。

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

---

退房。到目前为止，它运行得很好。感谢反馈。

我通过在组件中添加以下内容来解决此问题：

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

---

更新：您现在可以

proxy.stopPropagation（）}/>

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

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

使用这种结构，如果您的函数是由标记包装的，那么值得注意的是，如果您要将事件附加到

文档中，
e.stopPropagation（）
，将不会有任何帮助。作为一种解决方法，您可以使用
window.addEventListener（）
而不是
document.addEventListener
，然后
event.stopPropagation（）
将停止事件传播到窗口。
来自：
下面的事件处理程序是由冒泡阶段的事件触发的。要为捕获阶段注册事件处理程序，append capture。（增加重点）

如果您的React代码中有一个click事件侦听器，并且您不希望它冒泡，那么我认为您要做的是使用
onClickCapture
而不是
onClick
。然后将事件传递给处理程序并执行
event.nativeEvent.stopPropagation（）
，以防止本机事件冒泡到普通JS事件侦听器（或任何未响应的事件）.
一个快速解决方法是使用
窗口。addEventListener
而不是
文档。addEventListener
将17个委托事件反应到
根
而不是
文档
，这可能会解决问题。
更多详细信息。
React的实际事件侦听器也位于文档的根目录下，这意味着单击事件已经冒泡到根目录下。您可以使用
event.nativeEvent.stopImmediatePropagation
来防止其他事件侦听器触发，但执行顺序不受保证。实际上，将按绑定顺序调用声明事件侦听器。如果您的React JS在jQuery之前初始化（就像在您的小提琴中一样），停止立即传播将起作用。React停止调用jQuery侦听器：jQuery不可能阻止调用React，因为jQuery侦听器稍后会在您的小提琴中绑定。一个选项是在
componentDidMount
中设置您自己的jQuery事件处理程序，但它可能会以意外的方式干扰其他React事件处理程序。我意识到
上的第二个示例。停止传播
必然不起作用。您的示例使用事件委派，但试图在元素处停止传播。侦听器需要绑定到元素本身：
$（'.stop propagation'）.on（'click'，函数（e）{e.stopPropagation（）；}）。此小提琴像您尝试的那样阻止所有传播：@ssorellen:diacription:React是将其事件侦听器绑定到
文档上还是根React组件上？只是说“在顶层”，我认为这意味着它不是
文档
（但我不知道这是否相关）。@FighterJet，这取决于事件类型。对于冒泡的事件，使用顶级委派。对于不冒泡的事件，React必须侦听各种DOM节点。更彻底的描述