ReactJS SyntheticEvent stopPropagation () funciona apenas com eventos React?

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

React usa delegação de eventos com um único ouvinte de eventos ativado documentpara eventos que borbulham, como 'clique' neste exemplo, o que significa que não é possível interromper a propagação; o evento real já foi propagado no momento em que você interage com ele no React. stopPropagationno evento sintético do React é possível porque o React manipula a propagação de eventos sintéticos internamente.

Trabalhando com o JSFiddle com as correções abaixo.

Reagir parar a propagação no evento jQuery

Use Event.stopImmediatePropagationpara impedir que seus outros ouvintes (jQuery neste caso) na raiz sejam chamados. É suportado no IE9 + e em navegadores modernos.

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

• Advertência: os ouvintes são chamados na ordem em que estão vinculados. O React deve ser inicializado antes de outro código (jQuery aqui) para que isso funcione.

Propagação de parada do jQuery no evento React

Seu código jQuery também usa delegação de eventos, o que significa chamar stopPropagation o manipulador não está parando nada; o evento já foi propagado documente o ouvinte do React será acionado.

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

Para impedir a propagação além do elemento, o ouvinte deve estar vinculado ao próprio elemento:

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

Edit (14/01/2016): Esclareceu que a delegação é necessariamente usada apenas para eventos que borbulham. Para obter mais detalhes sobre o tratamento de eventos, a fonte do React possui comentários descritivos: ReactBrowserEventEmitter.js .

Vale ressaltar ( desta edição ) que se você estiver anexando eventos document, e.stopPropagation()não ajudará. Como solução alternativa, você pode usar em window.addEventListener()vez de document.addEventListenere event.stopPropagation()interromper a propagação do evento para a janela.

Ainda é um momento interessante:

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

Use essa construção, se sua função estiver envolvida por tag

Consegui resolver isso adicionando o seguinte ao meu componente:

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

Encontrei este problema ontem, por isso criei uma solução amigável ao React.

Confira react-native-listener . Está funcionando muito bem até agora. Feedback apreciado.

Na documentação do React : Os manipuladores de eventos abaixo são acionados por um evento na fase de bolhas . Para registrar um manipulador de eventos para a fase de captura, anexe o Capture . (enfase adicionada)

Se você tem um ouvinte de evento de clique no código do React e não quer que ele borbulhe, acho que o que você quer fazer é usar em onClickCapturevez de onClick. Em seguida, você passaria o evento para o manipulador e o faria event.nativeEvent.stopPropagation()para impedir que o evento nativo borbulhasse para um ouvinte de eventos JS baunilha (ou qualquer coisa que não reaja).

Atualização: agora você pode <Elem onClick={ proxy => proxy.stopPropagation() } />

Uma solução rápida é usar em window.addEventListenervez de document.addEventListener.