Estou tentando usar event.stopPropagation () dentro de um componente ReactJS para impedir que um evento click borbulhe e desencadeie um evento click anexado ao JQuery no código legado, mas parece que o stopPropagation () do React apenas interrompe a propagação para eventos também anexado no React, e o stopPropagation () do JQuery não interrompe a propagação para eventos anexados ao React.
Existe alguma maneira de fazer stopPropagation () funcionar nesses eventos? Eu escrevi um JSFiddle simples para demonstrar esses comportamentos:
/** @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();
});
});
fonte
event.nativeEvent.stopImmediatePropagation
para impedir que outros ouvintes de eventos sejam acionados, mas a ordem de execução não é garantida.stopImmediatePropagation
ouvintes de evento de declarações serão chamados na ordem em que foram vinculados. Se o seu React JS for inicializado antes do seu jQuery (como está no seu violino), interromper a propagação imediata funcionará.componentDidMount
, mas isso pode interferir com outros manipuladores de eventos React de maneiras inesperadas..stop-propagation
necessariamente não vai funcionar. Seu exemplo usa delegação de eventos, mas está tentando parar a propagação no elemento O ouvinte precisa ser ligado ao próprio elemento:$('.stop-propagation').on('click', function(e) { e.stopPropagation(); });
. Isto evita violino tudo propagação como se você estivesse tentando: jsfiddle.net/7LEDT/6