Haben Sie jemals diese beiden Dinge (im Titel) in jQuery gesehen? Hier ist ein einfaches Beispiel
$("a").click(function() {
$("body").append($(this).attr("href"));
return false;
}
Dieser Code würde dashrefAttribut jedes Mal als Text an den Body anhängen, wenn ein Link angeklickt wurde, aber **nicht** tatsächlich zu diesem Link gehen. Dasreturn false;Teil dieses Codes verhindert, dass der Browser die Standardaktion für diesen Link ausführt. Genau das könnte man so schreiben
$("a").click(function(e) {
$("body").append($(this).attr("href"));
e.preventDefault();
}
Was ist also der Unterschied?
Der Unterschied ist, dassreturn false;noch einen Schritt weiter geht, indem es auch verhindert, dass sich das Ereignis im DOM ausbreitet (oder „nach oben blubbert“). Die von-dir-vielleicht-nicht-gewusst-Information ist, dass jedes Mal, wenn ein Ereignis auf einem Element auftritt, dieses Ereignis auch auf jedem einzelnen Elternelement ausgelöst wird. Nehmen wir also an, Sie haben eine Box in einer Box. Beide Boxen haben darauf Klick-Ereignisse. Klicken Sie auf die innere Box, wird auch ein Klick auf die äußere Box ausgelöst, es sei denn, Sie verhindern die Ausbreitung. So
Mit anderen Worten
function() {
return false;
}
// IS EQUAL TO
function(e) {
e.preventDefault();
e.stopPropagation();
}
Es ist wahrscheinlich alles komplizierter als das, und Artikel wie dieser erklären es wahrscheinlich viel besser.

Ich wusste bis jetzt nie, was „return false“ tut. Verhindert es immer die Standardaktion oder hängt es vom Kontext ab?
Alter, bist du neu in der Webentwicklung?
return false ist einer der ältesten Sätze in der Programmierung.
Gott segne all euch „Webentwickler“, die nichts von Programmierung verstehen.
Wenn man dem Link in seinem Namen folgt, würde ich vermuten, dass er ein Filmtyp ist, und ich würde nicht unbedingt erwarten, dass er etwas über Webentwicklung weiß.
Die erste Antwort war völlig unnötig. Der Grund, warum die Leute zu CSS-Tricks kommen, ist, um zu lernen, nicht um von denen verspottet zu werden, die anscheinend schon alles wissen.
Ich habe schon TONNEN von grundlegenden Dingen von Chris gelernt, und ich bin sicher, andere (auch Profis) haben das Gleiche erfahren.
Ja, ich auch nicht! Ich schätze, dann ist es klüger, einfach zu verhindern, dass die Standardaktion stattfindet, als die gesamte Ausbreitung zu stoppen (dem Fluss folgen, sozusagen…)
Danke Chris, dass du den Unterschied geklärt hast. Ich dachte immer, sie wären dasselbe :P
Ich habe „Bubbling Up“ bis jetzt nie verstanden!
Impliziert das, dass die return false-Methode schneller oder weniger JS-intensiv ist?
Anscheinend ja
„…wenn Ihre Dokumentenstruktur sehr komplex ist […] können Sie Systemressourcen sparen, indem Sie das Blubbern ausschalten.“
— wie diese
Ich habe ein Tutorial über Ereignisse geschrieben, vielleicht klärt Schritt 11 die Dinge auf, obwohl es um ActionScript 3.0 geht, ist die Theorie hinter dem Aufblubbern (Ereignisfluss) dieselbe.
http://active.tutsplus.com/tutorials/actionscript/a-close-look-at-the-actionscript-30-event-framework/
Wenn es einen Javascript-Fehler auf der Seite gibt, führt die Verwendung von return false dazu, dass der Browser die Standardaktion ausführt. Das kann mit preventDefault() vermieden werden
Beispiel
Schön.
Dies ist ein gutes Beispiel, das die Flexibilität von e.preventDefault() hervorhebt. Nämlich, dass es jederzeit aufgerufen werden kann. Code kann davor, danach oder sogar darum herum platziert werden. (wie in if() Statement)
Wenn Sie 2 Handler für ein Element haben, verhindert return false auch die Ausführung des zweiten Handlers. Nun, ich denke, return false ist der einzige Weg, die Ausführung zusätzlicher Handler auf demselben Element zu verhindern.
Zumindest habe ich es gefunden. Die korrekte Funktionsweise von return false ist (jQuery)
function() {
return false;
}
// IST GLEICHBEDEUTEND MIT
function(e) {
e.preventDefault();
e.stopImmediatePropagation();
}
Ich habe mich das neulich gefragt!! Ich habe fast immer
return false;verwendet und kannte den Unterschied zwischen ihnen nie.Das wusste ich nie, danke für die Information.
Mein Lieblingsbeispiel dafür, um es zu zeigen, ist so etwas wie
Alter Mann, ich verstehe deinen Code nicht, das macht mich wirklich verrückt!!!! Sprich Chinesisch!!!
Schön. Jetzt, wo ich heute etwas gelernt habe, gehe ich wieder schlafen. :)
Praktischer Tipp, danke Chris :)
Sehr nützlich! Danke. Ich werde e.preventDefault() jetzt viel mehr verwenden :)
Das mag etwas übertrieben sein, aber um auf Nummer sicher zu gehen, versuchen Sie es vielleicht
e.preventDefault(); kann tatsächlich verwendet werden, um Drag & Drop-Interfaces auf Touchscreen-Geräten zu erstellen, um das Standardverhalten von Scrollen oder Zoomen zu verhindern. Es ist ziemlich gut.
Wie immer Chris, großartiger Artikel.
Ich habe immer return false; verwendet
Ich wusste nicht einmal von e.preventDefault();
Also nochmals danke! Mach weiter so!!
Ich möchte mehr über Javascript lernen. Aber ich habe keinen einfachen und effektiven Weg zum Lernen gefunden. Kann mir jemand helfen?
Ich kann.
Es ist wirklich gut gesagt. Genau so ist es. Ich bin aus China
Das war die kurze Lektüre auf jeden Fall wert. Ich bin mir nicht sicher warum, aber ich habe immer preventDefault verwendet. Ich glaube, ich werde jetzt zu return false wechseln, da das der schnellere und effizientere Weg sein sollte. Guter Beitrag Chris.
Ich verwende normalerweise return false, aber ich denke, feroc1ty und Mark haben großartige Beispiele dafür gegeben, wann dies nicht die richtige Wahl ist.
Danke Chris! Ich habe noch eine Frage: Was genau ist „e“?
Es ist ein beliebiger Variablennamen.
'e' ist ein Name einer Argumentvariable. Diese Variable ist ein jQuery
event-Objekt, das alle Informationen über das Ereignis enthält. Alle Event-Handler in jQuery empfangen es als erstes Argument.Um tiefer einzutauchen:
stopPropagationundpreventDefaultsind Methoden dieses Ereignisobjekts.Weitere Details
event.preventDefault();
Verhindert, dass das z. B. Klick-Ereignis ausgelöst wird, aber wenn der für das Klick-Ereignis verwendete Selektor im Geltungsbereich einer anderen Funktion liegt, funktioniert event.preventDefault() nicht, da das Ereignis nach oben im Geltungsbereich „geblubbert“ wird, während event.stopPropagation das Ereignis auch in einem weiter entfernten Geltungsbereich „tötet“...
Ich bevorzuge die Verwendung von event.stopPropagation() anstelle von event.preventDefault(), um das Blubbern von Ereignissen zu verhindern
Beispiel für einen Löschlink und JS-Bestätigung
JS
oder
Hallo Chris.
Ich arbeite gerade an einem Beispiel, bei dem ich einer Div eine „active“-Klasse zuweisen und diese Klasse beim zweiten Klick wieder entfernen muss. Aber ich möchte die „active“-Klasse nicht entfernen, wenn ich auf einen der Links innerhalb dieser Div klicke. Ist „return false“ für die inneren Links die beste Lösung für mich? Es funktioniert, ich frage mich nur, ob es die beste Lösung ist.
Hier wird eine weit verbreitete Fehlinterpretation über die Verwendung von
return falsebei Ereignissen vermittelt.jQuery behandelt return false als interne Flagge – verwendet es, um „Standard verhindern und Ausbreitung stoppen“ zu bedeuten. Native Event-Listener behandeln es nicht auf die gleiche Weise.
Wenn Sie kein jQuery verwenden, ist return false in
addEventListenernichts weiter als ein Überbleibsel aus der Vergangenheit – eine Kurzform füre.returnValue = false, was eine veraltete Syntax ist. Es verhält sich nicht konsistent zwischen Browsern, aber Sie müssen es sowieso nie verwenden.Wenn Sie kein jQuery verwenden, geben Sie nichts zurück, verwenden Sie beliebige oder alle davon:
preventDefault(), um eine Standardaktion zu blockieren,stopPropagation(), um das Blubbern des Ereignisses zu stoppen, oderstopImmediatePropagation(), um zu verhindern, dass das Ereignis an andere Handler auf demselben Element weitergeleitet wird (obwohl letzteres nicht so weit verbreitet ist).Wenn Sie jQuery verwenden, ist return false äquivalent zum Aufrufen von
e.preventDefault(); e.stopPropagation();(d.h. return false in jQuery ist nur eine proprietäre Kurzform, es hat keine eigene Bedeutung)
Es könnte erwähnenswert sein, dass die Verwendung von return false auf diese Weise in aktuellen Versionen von jQuery als veraltet gilt und zu einer Fehlermeldung in der Konsole führt (etwas, das ältere Versionen von IE zum Absturz bringt, da console.log() nicht unterstützt wird). Sie sollten e.preventDefault() verwenden.
Das Beispiel funktioniert in Firefox 24.6.0 überhaupt nicht?