ReactJS SyntheticEvent stopPropagation () funziona solo con eventi React?

Sto tentando di utilizzare event.stopPropagation () all’interno di un componente ReactJS per interrompere un evento click da bolle e triggersre un evento click collegato con 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 collegati con React.

C’è un modo per far sì che stopPropagation () funzioni su questi eventi? Ho scritto un semplice JSFiddle per dimostrare questi comportamenti:

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 (  ); } }); React.renderComponent(, 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 sul document per gli eventi che bolle, come “clic” in questo esempio, il che significa che l’interruzione della propagazione non è ansible; l’evento reale si è già propagato nel momento in cui interagisci con esso in React. stopPropagation sull’evento sintetico di React è ansible perché React gestisce internamente la propagazione di eventi sintetici.

Lavorando con JSFiddle con le correzioni dal basso: http://jsfiddle.net/7LEDT/6/

Reagisci Interrompi propagazione su evento jQuery

Usa Event.stopImmediatePropagation per evitare che gli altri ascoltatori della tua radice (jQuery in questo caso) vengano richiamati. È 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. Reagire deve essere inizializzato prima di un altro codice (jQuery qui) affinché funzioni.

jQuery Interrompe la propagazione sull’evento React

Il tuo codice jQuery usa anche la delega degli eventi, il che significa che la chiamata a stopPropagation nel gestore non sta fermando nulla; l’evento si è già propagato per document e il listener di React verrà triggersto.

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

Per impedire la propagazione oltre l’elemento, il listener 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 eventi che bolla. Per maggiori dettagli sulla gestione degli eventi, la fonte di React ha commenti descrittivi: https://github.com/facebook/react/blob/3b96650e39ddda5ba49245713ef16dbc52d25e9e/src/renderers/dom/client/ReactBrowserEventEmitter.js#L23

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 amichevole per React.

Controlla react-native-listener . Funziona molto bene finora. Feedback apprezzato.

È ancora un momento interessante:

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

Usa questa costruzione, se la tua funzione è avvolta dal tag

Aggiornamento: ora è ansible proxy.stopPropagation() } />