javascript - ReactJS SyntheticEvent stopPropagation() solo funciona con eventos Reaccionar?

react listener

Question

Estoy intentando usar event.stopPropagation () dentro de un componente ReactJS para evitar que un evento de clic burbujee y active un evento click asociado con JQuery en el código heredado, pero parece que StopPropagation () de React solo detiene la propagación a eventos también se adjunta en React, y stopPropagation () de JQuery no detiene la propagación a los eventos adjuntos con Reaccionar.

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

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

Answer 1

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

Answer 2

Me encontré con este problema ayer, así que creé una solución de React.

Echa un vistazo a react-native-listener . Está funcionando muy bien hasta ahora. Comentarios apreciados.

Answer 3

Pude resolver esto agregando lo siguiente a mi componente:

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

Answer 4

React usa la delegación de eventos con un solo detector de eventos en el document para eventos que burbujean, como ''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. stopPropagation en el evento sintético de React es posible porque React maneja la propagación de eventos sintéticos internamente.

Trabajando JSFiddle con las correcciones de abajo: jsfiddle.net/7LEDT/6

React Stop Propagation en jQuery Event

Utilice stopImmediatePropagation para evitar que se stopImmediatePropagation a los otros oyentes (jQuery en este caso) de la raíz. Es compatible con IE9 + y navegadores modernos.

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

• Advertencia: los oyentes son llamados en el orden en que están atados. Reaccionar debe inicializarse antes que otro código (jQuery aquí) para que esto funcione.

jQuery Stop Propagation on React Event

Su código jQuery usa delegación de eventos también, lo que significa que llamar a stopPropagation en el controlador no detiene nada; el evento ya se propagó al document y 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 en sí:

// 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: https://github.com/facebook/react/blob/3b96650e39ddda5ba49245713ef16dbc52d25e9e/src/renderers/dom/client/ReactBrowserEventEmitter.js#L23

Answer 5

Todavía es un momento interesante:

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

Usa esta construcción, si tu función está envuelta por una etiqueta