ReactJS SyntheticEvent stopPropagation () funktioniert nur mit React-Ereignissen?

Ich versuche, event.stopPropagation () in einer ReactJS-Komponente zu verwenden, um zu verhindern, dass ein Klickereignis in die Luft sprudelt und ein Klickereignis auslöst, das mit JQuery im Legacy-Code angehängt wurde. Es scheint jedoch, dass stopPropagation () von React nur die Weitergabe an Ereignisse stoppt wird auch in React angehängt, und stopQropagation () von JQuery stoppt die Weitergabe an mit React angehängte Ereignisse nicht.

Gibt es eine Möglichkeit, stopPropagation () für diese Ereignisse funktionsfähig zu machen? Ich habe eine einfache JSFiddle geschrieben , um diese Verhaltensweisen zu demonstrieren:

/** @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 verwendet die Ereignisdelegierung mit einem einzelnen Ereignis-Listener documentfür Ereignisse, die sprudeln, wie z. B. "Klicken" in diesem Beispiel. Dies bedeutet, dass das Stoppen der Weitergabe nicht möglich ist. Das reale Ereignis hat sich bereits verbreitet, wenn Sie in React mit ihm interagieren. stopPropagationDas synthetische Ereignis von on React ist möglich, da React die interne Ausbreitung synthetischer Ereignisse handhabt.

Arbeiten Sie JSFiddle mit den Korrekturen von unten.

React Stop Propagation auf jQuery-Ereignis

Verwenden Event.stopImmediatePropagationSie diese Option , um zu verhindern, dass Ihre anderen Listener (in diesem Fall jQuery) im Stammverzeichnis aufgerufen werden. Es wird in IE9 + und modernen Browsern unterstützt.

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

• Vorsichtsmaßnahme: Zuhörer werden in der Reihenfolge angerufen, in der sie gebunden sind. Die Reaktion muss vor einem anderen Code (hier jQuery) initialisiert werden, damit dies funktioniert.

jQuery Stop Propagation bei Reaktionsereignis

Ihr jQuery-Code verwendet auch die Ereignisdelegierung. Das Aufrufen stopPropagationdes Handlers stoppt also nichts. Das Ereignis wurde bereits an weitergegeben document, und der Listener von React wird ausgelöst.

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

Um eine Weitergabe über das Element hinaus zu verhindern, muss der Listener an das Element selbst gebunden sein:

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

Bearbeiten (14.01.2016): Es wurde klargestellt, dass die Delegierung notwendigerweise nur für Ereignisse verwendet wird, die in die Luft sprudeln. Weitere Informationen zur Ereignisbehandlung finden Sie in der Quelle von React mit beschreibenden Kommentaren: ReactBrowserEventEmitter.js .

Bemerkenswert (aus dieser Ausgabe ) , dass , wenn Sie Ereignisse sind angebracht document, e.stopPropagation()ist nicht auf Hilfe gehen. Um dieses Problem zu umgehen, können Sie window.addEventListener()anstelle von verwenden und verhindern document.addEventListener, event.stopPropagation()dass das Ereignis in das Fenster übertragen wird.

Es ist immer noch ein interessanter Moment:

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

Verwenden Sie diese Konstruktion, wenn Ihre Funktion von einem Tag umschlossen ist

Ich konnte dieses Problem beheben, indem ich meiner Komponente Folgendes hinzufügte:

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

Ich bin gestern auf dieses Problem gestoßen und habe eine reaktionsfreundliche Lösung erstellt.

Schauen Sie sich den React-Native-Listener an . Bisher funktioniert es sehr gut. Feedback erwünscht.

Aus der React-Dokumentation : Die folgenden Ereignishandler werden durch ein Ereignis in der Bubbling-Phase ausgelöst . Fügen Sie Capture hinzu , um einen Ereignishandler für die Erfassungsphase zu registrieren . (Betonung hinzugefügt)

Wenn Sie einen Klickereignis-Listener in Ihrem React-Code haben und nicht möchten, dass er in die Luft sprudelt, möchten Sie meiner Meinung nach onClickCapturestattdessen anstelle von verwenden onClick. Dann würden Sie das Ereignis an den Handler übergeben und verhindern event.nativeEvent.stopPropagation(), dass das native Ereignis an einen Vanilla JS-Ereignis-Listener (oder an etwas, das nicht reagiert) sprudelt.

Update: Das kannst du jetzt <Elem onClick={ proxy => proxy.stopPropagation() } />

Eine schnelle Problemumgehung wird window.addEventListeneranstelle von verwendet document.addEventListener.