ReactJS SyntheticEvent stopPropagation () solo funciona con eventos React?

Estoy tratando de usar event.stopPropagation () dentro de un componente ReactJS para evitar que un evento click aumente y active un evento click que se adjuntó con JQuery en el código heredado, pero parece que stopPropagation () de React solo detiene la propagación a eventos también adjunto en React, y stopPropagation () de JQuery no detiene la propagación a eventos adjuntos con React.

¿Hay alguna manera de hacer que stopPropagation () funcione en estos eventos? Escribí un JSFiddle simple para demostrar estos comportamientos:

/** @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 utiliza la delegación de eventos con un único detector de eventos activado documentpara eventos que burbujean, como 'hacer clic' en este ejemplo, lo que significa que no es posible detener la propagación; el evento real ya se ha propagado cuando interactúas con él en React. stopPropagationEl evento sintético de React es posible porque React maneja la propagación de eventos sintéticos internamente.

Trabajando JSFiddle con las correcciones desde abajo.

Reaccionar Detener propagación en el evento jQuery

Utilícelo Event.stopImmediatePropagationpara evitar que se llame a sus otros oyentes (jQuery en este caso) en la raíz. Es compatible con IE9 + y navegadores modernos.

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

• Advertencia: los oyentes se llaman en el orden en que están vinculados. React debe inicializarse antes que otro código (jQuery aquí) para que esto funcione.

jQuery Stop Propagation on React Event

Su código jQuery también usa la delegación de eventos, lo que significa que llamar stopPropagational controlador no detiene nada; el evento ya se ha propagado documenty se activará el oyente de React.

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

Para evitar la propagación más allá del elemento, el oyente debe estar vinculado al elemento mismo:

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

Editar (14/01/2016): se aclaró que la delegación solo se usa necesariamente para eventos que burbujean. Para obtener más detalles sobre el manejo de eventos, la fuente de React tiene comentarios descriptivos: ReactBrowserEventEmitter.js .

Vale la pena señalar (de este problema ) que si está adjuntando eventos document, e.stopPropagation()no va a ayudar. Como solución alternativa, puede usar en window.addEventListener()lugar de document.addEventListener, luego event.stopPropagation()detendrá la propagación del evento a la ventana.

Todavía es un momento interesante:

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

Use esta construcción, si su función está envuelta por etiqueta

Pude resolver esto agregando lo siguiente a mi componente:

componentDidMount() {
  ReactDOM.findDOMNode(this).addEventListener('click', (event) => {
    event.stopPropagation();
  }, false);
}

Ayer me encontré con este problema, así que creé una solución amigable con React.

Echa un vistazo a react-native-listener . Funciona muy bien hasta ahora. Comentarios apreciados.

De la documentación de React : los controladores de eventos a continuación se activan por un evento en la fase de propagación . Para registrar un controlador de eventos para la fase de captura, agregue Captura . (énfasis añadido)

Si tiene un detector de eventos de clic en su código React y no desea que brote, creo que lo que quiere hacer es usarlo en onClickCapturelugar de onClick. Luego, pasaría el evento al controlador y lo haría event.nativeEvent.stopPropagation()para evitar que el evento nativo se propague a un oyente de eventos JS (o cualquier cosa que no reaccione).

Actualización: ahora puedes <Elem onClick={ proxy => proxy.stopPropagation() } />

Se está utilizando una solución rápida en window.addEventListenerlugar de document.addEventListener.