ReactJS SyntheticEvent stopPropagation () funziona solo con gli eventi React?

Sto provando a utilizzare event.stopPropagation () all'interno di un componente ReactJS per impedire a un evento click di ribollire e innescare un evento click che era allegato a JQuery nel codice legacy, ma sembra che stopPropagation () di React interrompa solo la propagazione agli eventi anche allegato in React, e stopPropagation () di JQuery non interrompe la propagazione agli eventi allegati con React.

C'è un modo per far funzionare stopPropagation () in questi eventi? Ho scritto un semplice JSFiddle per dimostrare questi comportamenti:

/** @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 utilizza la delega degli eventi con un singolo listener di eventi attivato documentper gli eventi che si muovono in bolla, come "clic" in questo esempio, il che significa che non è possibile interrompere la propagazione; l'evento reale si è già propagato nel momento in cui interagisci con esso in React. stopPropagationsull'evento sintetico di React è possibile perché React gestisce internamente la propagazione degli eventi sintetici.

Lavorare con JSFiddle con le correzioni dal basso.

React Stop Propagation on jQuery Event

Da utilizzare Event.stopImmediatePropagationper impedire che gli altri listener (jQuery in questo caso) sulla radice vengano chiamati. È supportato in IE9 + e nei browser moderni.

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

• Avvertenza: gli ascoltatori vengono chiamati nell'ordine in cui sono vincolati. React deve essere inizializzato prima dell'altro codice (jQuery qui) affinché funzioni.

jQuery Arresta la propagazione in caso di reazione

Il tuo codice jQuery utilizza anche la delega degli eventi, il che significa che chiamare stopPropagationil gestore non interrompe nulla; l'evento si è già propagato documente l'ascoltatore di React verrà attivato.

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

Per impedire la propagazione oltre l'elemento, l'ascoltatore deve essere associato all'elemento stesso:

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

Modifica (2016/01/14): chiarito che la delega è necessariamente utilizzata solo per gli eventi di quella bolla. Per maggiori dettagli sulla gestione degli eventi, la fonte di React ha commenti descrittivi: ReactBrowserEventEmitter.js .

Vale la pena notare (da questo numero ) che se stai allegando eventi a document, e.stopPropagation()non ti aiuterà. Come soluzione alternativa, puoi usare window.addEventListener()invece di document.addEventListener, quindi event.stopPropagation()interromperà la propagazione dell'evento alla finestra.

È ancora un momento interessante:

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

Usa questa costruzione, se la tua funzione è racchiusa in tag

Sono stato in grado di risolvere questo problema aggiungendo quanto segue al mio componente:

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

Mi sono imbattuto in questo problema ieri, quindi ho creato una soluzione React-friendly.

Dai un'occhiata a react-native-listener . Finora funziona molto bene. Feedback apprezzato.

Dalla documentazione di React : I gestori di eventi di seguito vengono attivati da un evento nella fase di bubbling . Per registrare un gestore eventi per la fase di acquisizione, aggiungi Capture . (enfasi aggiunta)

Se hai un listener di eventi click nel tuo codice React e non vuoi che si diffonda, penso che quello che vuoi fare sia usare onClickCaptureinvece di onClick. Quindi passeresti l'evento al gestore e faresti event.nativeEvent.stopPropagation()per impedire all'evento nativo di ribollire a un listener di eventi JS vanilla (o qualsiasi cosa che non reagisca).

Aggiornamento: ora puoi <Elem onClick={ proxy => proxy.stopPropagation() } />

Una soluzione rapida è usare window.addEventListenerinvece di document.addEventListener.