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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (107)

我试图在ReactJS组件中使用event.stopPropagation()来停止一个点击事件,它会冒泡并触发在传统代码中使用JQuery附加的click事件,但它看起来像React的stopPropagation()只会停止传播到事件也附加在React中,而JQuery的stopPropagation()不会停止传播到附加了React的事件。

有什么方法可以让stopPropagation()在这些事件中起作用吗?我写了一个简单的JSFiddle来演示这些行为:

http://jsfiddle.net/7LEDT/3/

/** @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来处理冒泡的事件,例如本例中的“click”,这意味着停止传播是不可能的; 真正的事件已经在您与React交互的时候传播开来。stopPropagation对React的综合事件是可能的,因为React在内部处理合成事件的传播。

使用JSFiddle从下面修复:http : //jsfiddle.net/7LEDT/6/

React停止传播jQuery事件

使用Event.stopImmediatePropagation以防止你的其他(jQuery的在这种情况下)听众根被调用。它在IE9 +和现代浏览器中得到支持。

stopPropagation: function(e){
    e.stopPropagation();
    e.nativeEvent.stopImmediatePropagation();
},
  • 警告:听众按照绑定的顺序被调用。在其他代码(jQuery在这里)之前,React必须被初始化才能工作。

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

澄清,代表团只能用于泡沫事件。有关事件处理的更多详细信息,React的来源具有描述性评论:https//github.com/facebook/react/blob/3b96650e39ddda5ba49245713ef16dbc52d25e9e/src/renderers/dom/client/ReactBrowserEventEmitter.js#L23

用户回答回答于

扫码关注云+社区

领取腾讯云代金券