首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >ReactJS SyntheticEvent stopPropagation()只适用于React事件?

ReactJS SyntheticEvent stopPropagation()只适用于React事件?
EN

Stack Overflow用户
提问于 2014-06-26 02:10:10
回答 7查看 134K关注 0票数 142

我试图在ReactJS组件中使用event.stopPropagation()来阻止click事件冒泡并触发在遗留代码中附加了JQuery的单击事件,但是React的stopPropagation()似乎只停止传播到也附加在React中的事件,而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();
    });
});
EN

回答 7

Stack Overflow用户

发布于 2017-11-28 18:02:43

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

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

如果您的函数由标记包装,请使用此结构

票数 20
EN

Stack Overflow用户

发布于 2018-10-19 01:04:09

值得注意的是(来自this issue),如果您将事件附加到documente.stopPropagation()将不会有所帮助。作为解决方法,您可以使用window.addEventListener()而不是document.addEventListener,然后event.stopPropagation()将停止将事件传播到窗口。

票数 19
EN

Stack Overflow用户

发布于 2016-11-10 15:41:51

我可以通过在我的组件中添加以下代码来解决这个问题:

componentDidMount() {
  ReactDOM.findDOMNode(this).addEventListener('click', (event) => {
    event.stopPropagation();
  }, false);
}
票数 7
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/24415631

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档