event.preventDefault() vs. return false

Question

Wenn ich verhindern möchte, dass andere Ereignisbehandler nach dem Auslösen eines bestimmten Ereignisses ausgeführt werden, kann ich eine von zwei Techniken anwenden. In den Beispielen verwende ich jQuery, aber das gilt auch für einfache JS:

1. event.preventDefault()

$('a').click(function (e) {
    // custom handling here
    e.preventDefault();
});

2. return false

$('a').click(function () {
    // custom handling here
    return false;
});

Gibt es einen signifikanten Unterschied zwischen diesen beiden Methoden zum Stoppen der Ereignisausbreitung?

Für mich, return false; ist einfacher, kürzer und wahrscheinlich weniger fehleranfällig als die Ausführung einer Methode. Bei der Methode müssen Sie auf korrekte Groß- und Kleinschreibung, Klammern usw. achten.

Außerdem muss ich den ersten Parameter in callback definieren, um die Methode aufrufen zu können. Vielleicht gibt es einige Gründe, warum ich diese Vorgehensweise vermeiden und die Methode preventDefault stattdessen? Was ist der bessere Weg?

Answer 1

return false von innerhalb eines jQuery-Ereignishandlers ist praktisch dasselbe wie der Aufruf beider e.preventDefault y e.stopPropagation auf der bestandenen jQuery.Event-Objekt.

e.preventDefault() verhindert, dass das Standardereignis eintritt, e.stopPropagation() verhindert, dass das Ereignis in die Höhe schießt und return false wird beides tun. Beachten Sie, dass sich dieses Verhalten unterscheidet von normal (nicht jQuery) Ereignis-Handler, in denen insbesondere, return false tut no verhindern, dass das Ereignis in die Höhe schießt.

Source : John Resig

Jeder Vorteil zur Verwendung von event.preventDefault() über "Return false", um eine href-Klick abzubrechen?

Answer 2

Meiner Erfahrung nach gibt es zumindest einen klaren Vorteil bei der Verwendung von event.preventDefault() gegenüber der Verwendung von return false. Nehmen wir an, Sie erfassen das Klick-Ereignis auf einen Anker-Tag, bei dem es ein großes Problem wäre, wenn der Benutzer von der aktuellen Seite weg navigiert werden würde. Wenn Ihr Click-Handler return false verwendet, um die Browsernavigation zu verhindern, besteht die Möglichkeit, dass der Interpreter die return-Anweisung nicht erreicht und der Browser das Standardverhalten des Anker-Tags ausführt.

$('a').click(function (e) {
  // custom handling here

  // oops...runtime error...where oh where will the href take me?

  return false;
});

Der Vorteil der Verwendung von event.preventDefault() besteht darin, dass Sie dies als erste Zeile in den Handler einfügen können, wodurch gewährleistet wird, dass das Standardverhalten des Ankers nicht ausgelöst wird, auch wenn die letzte Zeile der Funktion nicht erreicht wird (z. B. Laufzeitfehler).

$('a').click(function (e) {
  e.preventDefault();

  // custom handling here

  // oops...runtime error, but at least the user isn't navigated away.
});

Answer 3

Dies ist nicht, wie Sie es betitelt haben, eine "JavaScript"-Frage; es ist eine Frage bezüglich des Designs von jQuery.

jQuery und die zuvor verlinkte Zitation von John Resig (in karim79's Nachricht ) scheinen die Ursache für das Missverständnis zu sein, wie Ereignisbehandler im Allgemeinen funktionieren.

Tatsache: Ein Ereignis-Handler, der false zurückgibt, verhindert die Standardaktion für dieses Ereignis. Er stoppt nicht die Ausbreitung des Ereignisses. Ereignisbehandlungsroutinen haben schon immer auf diese Weise funktioniert, seit den alten Tagen von Netscape Navigator.

Die Dokumentation von MDN erklärt, wie return false in einem Ereignis-Handler funktioniert

Was in jQuery passiert, ist nicht dasselbe wie bei Event-Handlern. DOM-Ereignis-Listener und MSIE "angehängte" Ereignisse sind eine ganz andere Sache.

Weitere Informationen finden Sie unter attachEvent auf MSDN und die W3C DOM 2 Ereignisse Dokumentation .

Answer 4

Im Allgemeinen ist die erste Option ( preventDefault() ) ist die richtige Wahl, aber man muss wissen, in welchem Kontext man sich befindet und welche Ziele man verfolgt.

Treibstoff für Ihre Codierung hat eine große Artikel über return false; vs event.preventDefault() vs event.stopPropagation() vs event.stopImmediatePropagation() .

Answer 5

Bei Verwendung von jQuery, return false macht 3 verschiedene Dinge, wenn Sie es aufrufen:

1. event.preventDefault();
2. event.stopPropagation();
3. Stoppt die Ausführung des Rückrufs und kehrt sofort zurück, wenn er aufgerufen wird.

Voir jQuery-Ereignisse: Stop (Mis)Using Return False für weitere Informationen und Beispiele.