ReactJS SyntheticEvent stopPropagation（）仅适用于React事件？ [英] ReactJS SyntheticEvent stopPropagation() only works with React events?

问题描述

我正在尝试在ReactJS组件中使用event.stopPropagation（）来阻止点击事件冒泡并触发遗留代码中附带JQuery的点击事件，但似乎React的stopPropagation（）仅停止传播到事件也附加在React中，而JQuery的stopPropagation（）不会停止传播到React附带的事件。

I'm trying to use event.stopPropagation() within a ReactJS component to stop a click event from bubbling up and triggering a click event that was attached with JQuery in legacy code, but it seems like React's stopPropagation() only stops propagation to events also attached in React, and JQuery's stopPropagation() doesn't stop propagation to events attached with React.

有什么方法可以使stopPropagation（）工作这些事件？我写了一个简单的JSFiddle来演示这些行为：

Is there any way to make stopPropagation() work across these events? I wrote a simple JSFiddle to demonstrate these behaviors:

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中与它交互时，真实事件已经传播了。可以在React的合成事件上使用 stopPropagation ，因为React在内部处理合成事件的传播。

React uses event delegation with a single event listener on document for events that bubble, like 'click' in this example, which means stopping propagation is not possible; the real event has already propagated by the time you interact with it in React. stopPropagation on React's synthetic event is possible because React handles propagation of synthetic events internally.

使用 Event.stopImmediatePropagation 阻止你的其他（在本例中为jQuery）监听器的根目录从被召唤。它在IE9 +和现代浏览器中得到支持。

Use Event.stopImmediatePropagation to prevent your other (jQuery in this case) listeners on the root from being called. It is supported in IE9+ and modern browsers.

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

• 警告：监听器被调用按照他们的约束顺序。必须在其他代码（jQuery）之前初始化React才能使其正常工作。


• Caveat: Listeners are called in the order in which they are bound. React must be initialized before other code (jQuery here) for this to work.

你的jQuery代码也使用了事件委托，这意味着在处理程序中调用 stopPropagation 并没有停止任何事情;该事件已经传播到文档，并且将触发React的侦听器。

Your jQuery code uses event delegation as well, which means calling stopPropagation in the handler is not stopping anything; the event has already propagated to document, and React's listener will be triggered.

// Listener bound to `document`, event delegation
$(document).on('click', '.stop-propagation', function(e){
    e.stopPropagation();
});

为防止传播超出元素，侦听器必须绑定到元素本身：

To prevent propagation beyond the element, the listener must be bound to the element itself:

// Listener bound to `.stop-propagation`, no delegation
$('.stop-propagation').on('click', function(e){
    e.stopPropagation();
});

编辑（2016/01/14）：澄清授权必不可少仅用于冒泡的事件。有关事件处理的更多详细信息，React的源代码具有描述性注释： https://github.com/facebook/react/blob/b87aabd/packages/react-dom/src/events/ReactBrowserEventEmitter.js#L52-L85

Edit (2016/01/14): Clarified that delegation is necessarily only used for events that bubble. For more details on event handling, React's source has descriptive comments: https://github.com/facebook/react/blob/b87aabd/packages/react-dom/src/events/ReactBrowserEventEmitter.js#L52-L85

这篇关于ReactJS SyntheticEvent stopPropagation（）仅适用于React事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！