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

javascript jquery reactjs

2022-08-30 03:03:39

我试图在 ReactJS 组件中使用 event.stopPropagation（）来阻止点击事件冒泡并触发在遗留代码中与 JQuery 一起附加的点击事件，但似乎 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();
    });
});

答案 1

React 使用事件委派和单个事件侦听器来表示冒泡的事件，如本例中的“click”，这意味着无法停止传播;当你在 React 中与它交互时，真实事件已经传播了。在 React 的合成事件上是可能的，因为 React 在内部处理合成事件的传播。documentstopPropagation

使用JSFiddle下面的修复程序。

在 jQuery 事件上响应停止传播

使用 Event.stopImmediatePropagation 可防止调用根系统上的其他侦听器（在本例中为 jQuery）。它在IE9 +和现代浏览器中受支持。

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

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

jQuery Stop Propagation on React Event

您的jQuery代码也使用事件委托，这意味着在处理程序中调用不会停止任何事情;事件已经传播到，React 的侦听器将被触发。stopPropagationdocument

// 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。

答案 2

这仍然是一个插曲的时刻：

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

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

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

使用JSFiddle下面的修复程序。

在 jQuery 事件上响应停止传播

jQuery Stop Propagation on React Event

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