ReactJS SyntheticEvent stopPropagation()仅适用于React事件吗?

JavaScript

樱A

2020-03-12

我正在尝试在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();
    });
});

第869篇《ReactJS SyntheticEvent stopPropagation()仅适用于React事件吗?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

6个回答
逆天Green古一 2020.03.12

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

Gil番长 2020.03.12

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

达蒙Jim斯丁 2020.03.12

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

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

乐伽罗古一 2020.03.12

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

神奇小小 2020.03.12

来自React文档:下面的事件处理程序冒泡阶段中的事件触发要为捕获阶段注册事件处理程序,请附加Capture(添加了重点)

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

猿村村 2020.03.12

仍然是一个有趣的时刻:

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

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

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android