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();
});
});
javascript
jquery
reactjs
lofiinterstate
quelle
quelle
event.nativeEvent.stopImmediatePropagation
damit verhindern, dass andere Ereignis-Listener ausgelöst werden, die Ausführungsreihenfolge kann jedoch nicht garantiert werden.stopImmediatePropagation
Listener von Anspruchsereignissen in der Reihenfolge aufgerufen, in der sie gebunden waren. Wenn Ihr React JS vor Ihrer jQuery initialisiert wird (wie in Ihrer Geige), funktioniert das Stoppen der sofortigen Weitergabe.componentDidMount
, der jedoch andere React-Ereignishandler auf unerwartete Weise beeinträchtigen kann..stop-propagation
unbedingt nicht funktionieren wird. In Ihrem Beispiel wird die Ereignisdelegierung verwendet, es wird jedoch versucht, die Weitergabe am Element zu stoppen. Der Listener muss an das Element selbst gebunden sein :$('.stop-propagation').on('click', function(e) { e.stopPropagation(); });
. Diese Geige verhindert jede Ausbreitung, wie Sie es versucht haben: jsfiddle.net/7LEDT/6Antworten:
React verwendet die Ereignisdelegierung mit einem einzelnen Ereignis-Listener
document
fü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.stopPropagation
Das 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.stopImmediatePropagation
Sie 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.jQuery Stop Propagation bei Reaktionsereignis
Ihr jQuery-Code verwendet auch die Ereignisdelegierung. Das Aufrufen
stopPropagation
des Handlers stoppt also nichts. Das Ereignis wurde bereits an weitergegebendocument
, und der Listener von React wird ausgelöst.Um eine Weitergabe über das Element hinaus zu verhindern, muss der Listener an das Element selbst gebunden sein:
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 .
quelle
document
oder die Root-React-Komponente? Die verlinkte Seite sagt nur "auf der obersten Ebene", was ich damit meine, dass es nicht das istdocument
(aber ich kann nicht herausfinden, ob dies überhaupt relevant ist).window
anstelle vondocument
: stackoverflow.com/a/52879137/438273Bemerkenswert (aus dieser Ausgabe ) , dass , wenn Sie Ereignisse sind angebracht
document
,e.stopPropagation()
ist nicht auf Hilfe gehen. Um dieses Problem zu umgehen, können Siewindow.addEventListener()
anstelle von verwenden und verhinderndocument.addEventListener
,event.stopPropagation()
dass das Ereignis in das Fenster übertragen wird.quelle
Es ist immer noch ein interessanter Moment:
Verwenden Sie diese Konstruktion, wenn Ihre Funktion von einem Tag umschlossen ist
quelle
event.nativeEvent
ist die richtige Antwort; Ich konnte so verwendencomposedPath()
:event.nativeEvent.composedPath()
wrapped by tag
? Könnten Sie bitte ein Beispiel geben?<div onClick=(firstHandler)> <div onClick=(secHandler)>active text</div> </div>
Ich konnte dieses Problem beheben, indem ich meiner Komponente Folgendes hinzufügte:
quelle
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.
quelle
react-native-listener
Verwendungen,findDomNode
die veraltet sein werden github.com/yannickcr/eslint-plugin-react/issues/…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
onClickCapture
stattdessen anstelle von verwendenonClick
. Dann würden Sie das Ereignis an den Handler übergeben und verhindernevent.nativeEvent.stopPropagation()
, dass das native Ereignis an einen Vanilla JS-Ereignis-Listener (oder an etwas, das nicht reagiert) sprudelt.quelle
Update: Das kannst du jetzt
<Elem onClick={ proxy => proxy.stopPropagation() } />
quelle
Eine schnelle Problemumgehung wird
window.addEventListener
anstelle von verwendetdocument.addEventListener
.quelle