stopPropagation
verhindert, dass das Ereignis die Ereigniskette in die Luft sprudelt.
preventDefault
verhindert die Standardaktion, die der Browser für dieses Ereignis ausführt.
Beispiele
Standard verhindern
$("#but").click(function (event) {
event.preventDefault()
})
$("#foo").click(function () {
alert("parent click event fired!")
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">
<button id="but">button</button>
</div>
stopPropagation
$("#but").click(function (event) {
event.stopPropagation()
})
$("#foo").click(function () {
alert("parent click event fired!")
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">
<button id="but">button</button>
</div>
Mit stopPropagation
wird nur der button
Klick-Handler des Klicks aufgerufen, während der div
Klick-Handler des Klicks niemals ausgelöst wird.
Wo, als ob Sie verwenden preventDefault
, wird nur die Standardaktion des Browsers gestoppt, aber der Klick-Handler des Div wird weiterhin ausgelöst.
Im Folgenden finden Sie einige Dokumente zu den DOM-Ereigniseigenschaften und -methoden von MDN:
Für IE9 und FF können Sie einfach präventDefault & stopPropagation verwenden.
Zur Unterstützung von IE8 und senken ersetzen stopPropagation
mit cancelBubble
und ersetzen preventDefault
mitreturnValue
event.stop
Funktion tun ... Auch seltsam, dass ich damit nie Probleme hatte. Ich benutze viel Sprudeln. Danke für das Beispiel!cancelBubble
undreturnValue
beide Eigenschaften sind (also festgelegt werden solltencancelBubble = true;
) und dasspreventDefault
undstopPropagation
Methoden sind (so genannt werden solltenpreventDefault();
)stopDefault()
dies nicht genauso funktioniert wiestopPropagation()
. Wenn die Standardaktion dieonclick
Methode nicht aufruft , was ist das?Terminologie
Von quirksmode.org :
Schnittstelle
Von w3.org zur Ereigniserfassung :
Für sprudelnde Ereignisse :
Für die Absage von Veranstaltungen :
Beispiele
In den folgenden Beispielen löst ein Klick auf den Hyperlink im Webbrowser den Ereignisfluss (die Ereignis-Listener werden ausgeführt) und die Standardaktion des Ereignisziels aus (eine neue Registerkarte wird geöffnet).
HTML:
JavaScript:
Beispiel 1 : Es ergibt sich die Ausgabe
Beispiel 2 : Hinzufügen
stopPropagation()
zur Funktionführt zur Ausgabe
Der Ereignis-Listener verhinderte eine weitere Ausbreitung des Ereignisses nach unten und oben. Die Standardaktion (das Öffnen einer neuen Registerkarte) wurde jedoch nicht verhindert.
Beispiel 3 : Hinzufügen
stopPropagation()
zur Funktionoder die Funktion
führt zur Ausgabe
Dies liegt daran, dass beide Ereignis-Listener auf demselben Ereignisziel registriert sind. Die Ereignis-Listener verhinderten eine weitere Ausbreitung des Ereignisses nach oben. Sie haben jedoch die Standardaktion (das Öffnen einer neuen Registerkarte) nicht verhindert.
Beispiel 4 :
preventDefault()
Zum Beispiel zu einer beliebigen Funktion hinzufügenverhindert, dass sich eine neue Registerkarte öffnet.
quelle
falsch zurückgeben;
return false;
macht 3 verschiedene Dinge, wenn Sie es nennen:event.preventDefault()
- Es stoppt das Standardverhalten des Browsers.event.stopPropagation()
- Es verhindert, dass das Ereignis das DOM verbreitet (oder "sprudelt").Beachten Sie, dass sich dieses Verhalten von normalen (Nicht-jQuery-) Ereignishandlern unterscheidet, bei denen insbesondere
return false
das Sprudeln des Ereignisses nicht verhindert wird.Standard verhindern();
preventDefault();
macht eine Sache: Es stoppt das Standardverhalten des Browsers.Wann man sie benutzt?
Wir wissen, was sie tun, aber wann sie zu verwenden sind? Es kommt einfach darauf an, was Sie erreichen wollen. Verwenden
preventDefault();
Sie diese Option, wenn Sie das Standardverhalten des Browsers "nur" verhindern möchten. Verwenden Sie return false. wenn Sie das Standardverhalten des Browsers verhindern und verhindern möchten, dass das Ereignis das DOM weitergibt. In den meisten Situationen, in denen Sie return false verwenden würden; was du wirklich willst istpreventDefault()
.Beispiele:
Versuchen wir anhand von Beispielen zu verstehen:
Wir werden ein reines JAVASCRIPT-Beispiel sehen
Beispiel 1:
Beispiel 2:
Beispiel 3:
Beispiel 4:
Beispiel 5:
Fälle:
Werden alle drei Beispiele sehen.
Hoffe, diese Beispiele sind klar. Versuchen Sie, alle diese Beispiele in einer HTML-Datei auszuführen, um zu sehen, wie sie funktionieren.
quelle
Dies ist das Zitat von hier
Event.preventDefault
Die PreventDefault-Methode verhindert, dass ein Ereignis seine Standardfunktionalität ausführt. Beispielsweise würden Sie verhindern, dass DefaultDefault für ein A-Element verwendet wird, um zu verhindern, dass das Klicken auf dieses Element die aktuelle Seite verlässt:
Während die Standardfunktionalität des Elements blockiert ist, sprudelt das Ereignis weiterhin im DOM.
Event.stopPropagation
Die zweite Methode, stopPropagation, ermöglicht die Ausführung der Standardfunktionalität des Ereignisses, verhindert jedoch die Weitergabe des Ereignisses:
stopPropagation verhindert effektiv, dass übergeordnete Elemente von einem bestimmten Ereignis in seinem untergeordneten Element erfahren.
quelle
Event.preventDefault - Stoppt das Standardverhalten des Browsers. Nun kommt das Standardverhalten des Browsers. Angenommen, Sie haben ein Ankertag und es hat ein href-Attribut, und dieses Ankertag ist in einem div-Tag verschachtelt, das ein Klickereignis hat. Das Standardverhalten des Ankertags ist das Klicken auf das Ankertag, durch das navigiert werden soll. Event.preventDefault stoppt jedoch in diesem Fall die Navigation. Aber es stoppt niemals das Sprudeln des Ereignisses oder die Eskalation des Ereignisses, dh
Das Ergebnis wird sein
"Element wurde angeklickt"
"Container wurde angeklickt"
Jetzt event.StopPropation stoppt das Sprudeln des Ereignisses oder die Eskalation des Ereignisses. Nun zum obigen Beispiel
Ergebnis wird sein
"Element wurde angeklickt"
Weitere Informationen finden Sie unter diesem Link https://codeplanet.io/preventdefault-vs-stoppropagation-vs-stopimmediatepropagation/
quelle
event.preventDefault();
Stoppt die Standardaktion eines Elements.event.stopPropagation();
Verhindert, dass das Ereignis in den DOM-Baum sprudelt, und verhindert, dass übergeordnete Handler über das Ereignis benachrichtigt werden.Wenn beispielsweise ein Link mit einer Klickmethode innerhalb einer
DIV
oderFORM
einer Klickmethode angehängt ist, wird verhindert, dass die KlickmethodeDIV
oderFORM
ausgelöst wird.quelle
quelle