ReactJS SyntheticEvent stopPropagation () ne fonctionne qu'avec les événements React?

J'essaie d'utiliser event.stopPropagation () dans un composant ReactJS pour empêcher un événement de clic de bouillonner et de déclencher un événement de clic qui était attaché avec JQuery dans le code hérité, mais il semble que stopPropagation () de React n'arrête que la propagation aux événements également attaché dans React, et stopPropagation () de JQuery n'arrête pas la propagation aux événements attachés avec React.

Existe-t-il un moyen de faire fonctionner stopPropagation () entre ces événements? J'ai écrit un simple JSFiddle pour démontrer ces comportements:

/** @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 utilise la délégation d'événement avec un seul écouteur d'événement activé documentpour les événements qui apparaissent, comme «clic» dans cet exemple, ce qui signifie que l'arrêt de la propagation n'est pas possible; l'événement réel s'est déjà propagé au moment où vous interagissez avec lui dans React. stopPropagationsur l'événement synthétique de React est possible car React gère la propagation des événements synthétiques en interne.

Travailler JSFiddle avec les correctifs ci-dessous.

Réagir la propagation d'arrêt sur l'événement jQuery

Utilisez Event.stopImmediatePropagationpour empêcher vos autres écouteurs (jQuery dans ce cas) sur la racine d'être appelés. Il est pris en charge dans IE9 + et les navigateurs modernes.

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

• Attention: les auditeurs sont appelés dans l'ordre dans lequel ils sont liés. React doit être initialisé avant tout autre code (jQuery ici) pour que cela fonctionne.

Propagation d'arrêt jQuery sur l'événement React

Votre code jQuery utilise également la délégation d'événements, ce qui signifie que l'appel stopPropagationdu gestionnaire n'interrompt rien; l'événement s'est déjà propagé vers document, et l'écouteur de React sera déclenché.

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

Pour empêcher la propagation au-delà de l'élément, l'auditeur doit être lié à l'élément lui-même:

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

Edit (2016/01/14): Clarification du fait que la délégation n'est nécessairement utilisée que pour les événements qui bouillonnent. Pour plus de détails sur la gestion des événements, la source de React contient des commentaires descriptifs: ReactBrowserEventEmitter.js .

Il convient de noter (à partir de ce numéro ) que si vous attachez des événements à document, cela e.stopPropagation()ne vous aidera pas. Comme solution de contournement, vous pouvez utiliser à la window.addEventListener()place de document.addEventListener, puis event.stopPropagation()arrêtera l'événement de se propager à la fenêtre.

C'est encore un moment intéressant:

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

Utilisez cette construction, si votre fonction est enveloppée par une balise

J'ai pu résoudre ce problème en ajoutant ce qui suit à mon composant:

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

J'ai rencontré ce problème hier, j'ai donc créé une solution compatible React.

Découvrez react-native-listener . Cela fonctionne très bien jusqu'à présent. Commentaires appréciés.

Depuis la documentation React : Les gestionnaires d'événements ci-dessous sont déclenchés par un événement en phase de bullage . Pour enregistrer un gestionnaire d'événements pour la phase de capture, ajoutez Capture . (italiques ajoutés)

Si vous avez un écouteur d'événement de clic dans votre code React et que vous ne voulez pas qu'il bouillonne, je pense que ce que vous voulez faire est d'utiliser à la onClickCaptureplace de onClick. Ensuite, vous passeriez l'événement au gestionnaire et le feriez event.nativeEvent.stopPropagation()pour empêcher l'événement natif de bouillonner jusqu'à un écouteur d'événement JS vanilla (ou tout ce qui ne réagit pas).

Mise à jour: vous pouvez maintenant <Elem onClick={ proxy => proxy.stopPropagation() } />

Une solution de contournement rapide consiste à utiliser window.addEventListenerau lieu de document.addEventListener.