event.preventDefault () vs. return false

2960

Wenn ich verhindern möchte, dass andere Ereignishandler ausgeführt werden, nachdem ein bestimmtes Ereignis ausgelöst wurde, kann ich eine von zwei Techniken verwenden. Ich werde jQuery in den Beispielen verwenden, aber dies gilt auch für Plain-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 es einfacher, kürzer und wahrscheinlich weniger fehleranfällig als das Ausführen einer Methode. Bei der Methode müssen Sie sich an das richtige Gehäuse, die richtige Klammer usw. erinnern.

Außerdem muss ich den ersten Parameter im Rückruf definieren, um die Methode aufrufen zu können. Vielleicht gibt es einige Gründe, warum ich es vermeiden sollte, es so zu machen und preventDefaultstattdessen zu verwenden? Was ist der bessere Weg?

RaYell
quelle
172
Beachten Sie, dass jQuery preventDefaultist nicht andere handers verhindert die Ausführung. Dafür stopImmediatePropagationist es da.
Crescent Fresh
19
@CrescentFresh verhindert, dass andere (anschließend gebundene) Handler auf dem DOM-Knoten ausgeführt werden, auf dem das Ereignis ausgelöst wird. Es verhindert einfach nicht die Ausbreitung.
Augenlidlosigkeit
37
Dies sind nicht "zwei Methoden zum Stoppen der Ereignisausbreitung?" e.preventDefault (); verhindert die Standardaktion, stoppt nicht die Ereignisausbreitung, die von e.stopPropagation () durchgeführt wird.
Timo Tijhof
24
Diese Frage und ihre Antworten beziehen sich auf jQuery. Wenn Sie hierher gekommen sind, um nach einer einfachen Javascript-Antwort zu suchen, siehe event.preventDefault () vs. return false (keine jQuery)
Oriol
5
Diese Antwort hat eine Tabelle, die alles erklärt stackoverflow.com/a/5302939/759452
Adrien Be

Antworten:

2818

return falsevon innerhalb eines Event - Handler jQuery ist das Gleiche wie beide fordern e.preventDefaultund e.stopPropagationauf dem übergebenen jQuery.Event Objekt.

e.preventDefault()verhindert das Auftreten des Standardereignisses, e.stopPropagation()verhindert das Sprudeln des Ereignisses und return falsebewirkt beides. Beachten Sie, dass dieses Verhalten unterscheidet sich von normalen (nicht-jQuery) Event - Handler, in denen vor allem, return falsehat nicht das Ereignis aus sprudeln zu stoppen.

Quelle: John Resig

Gibt es einen Vorteil bei der Verwendung von event.preventDefault () gegenüber "return false", um einen href-Klick abzubrechen?

karim79
quelle
126
return false von einem DOM2-Handler (addEventListener ) tut überhaupt nichts (verhindert weder den Standard noch stoppt das Sprudeln; von einem Microsoft DOM2-ish-Handler ( attachEvent) verhindert er den Standard, sprudelt aber nicht; von einem DOM0-Handler ( onclick="return ...") verhindert er den Standard (bereitgestellt) Sie fügen das returnin das Attribut ein), aber es sprudelt nicht. Von einem jQuery-Ereignishandler aus wird beides ausgeführt, da dies eine jQuery-Sache ist. Details und Live-Tests hier
TJ Crowder
12
Es wäre hilfreich, hier "Propagation" und "Default" zu definieren. Ich jedenfalls verwirre sie immer wieder. Ist das richtig? Propagation = mein Code (JavaScript-Ereignishandler für übergeordnete Elemente). Standard = Browser-Code (Links, Textauswahl usw.)
Bob Stein
5
Was ist wirklich mit Sprudeln gemeint? Beispiel?
Govinda Sakhare
5
+1 für die Feststellung, dass return falsedie Ereignisausbreitung in Nicht-jQuery-Ereignishandlern nicht gestoppt wird. dh <a href="#" onclick="return false">Test</a>nicht nicht aufhören das Ereignis aus sprudeln.
Doug S
424

Nach meiner Erfahrung gibt es bei der Verwendung von event.preventDefault () mindestens einen klaren Vorteil gegenüber der Verwendung von return false. Angenommen, Sie erfassen das Klickereignis auf einem Ankertag. Andernfalls wäre es ein großes Problem, wenn der Benutzer von der aktuellen Seite weg navigiert würde. Wenn Ihr Klick-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 Ankertags 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 im Handler hinzufügen können, um sicherzustellen, dass das Standardverhalten des Ankers nicht ausgelöst wird, unabhängig davon, ob 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.
});
Jeff Poulton
quelle
68
Obwohl dies zutrifft, ist das gegenteilige Verhalten oft vorzuziehen, wenn eine progressive Verbesserung durchgeführt wird (was meiner Meinung nach der wahrscheinlichste Grund ist, eine Standardaktion zu überschreiben)
meandmycode
Beides sind Möglichkeiten, das Standardverhalten eines Ereignisses zu blockieren. Es kommt nur darauf an, welches Problem Sie lösen möchten.
Ferkze
102

Dies ist keine "JavaScript" -Frage, wie Sie es betitelt haben. Es ist eine Frage zum Design von jQuery.

jQuery und das zuvor verknüpfte Zitat von John Resig (in karim79s Nachricht ) scheinen das Grundmissverständnis darüber zu sein, wie Event-Handler im Allgemeinen funktionieren.

Fakt: Ein Ereignishandler, der false zurückgibt, verhindert die Standardaktion für dieses Ereignis. Die Ereignisausbreitung wird nicht gestoppt. Event-Handler haben seit den alten Tagen von Netscape Navigator immer so funktioniert.

In der Dokumentation von MDN wird erläutert, wie return falsein einem Ereignishandler funktioniert

Was in jQuery passiert, ist nicht dasselbe wie das, was mit Ereignishandlern passiert. DOM-Ereignis-Listener und "angehängte" MSIE-Ereignisse sind eine ganz andere Sache.

Weitere Informationen finden Sie in attachEvent auf MSDN und in der Dokumentation zu W3C DOM 2-Ereignissen .

Garrett
quelle
6
@rds Das heißt "verhindern, dass Default die weitere Weitergabe des Ereignisses durch das DOM nicht stoppt. Dafür sollte event.stopPropagation verwendet werden."
Garrett
In einer Antwort auf eine eng verwandte Frage wird behauptet, dass vor HTML 5 die Rückgabe von false von einem Ereignishandler überhaupt nicht ausgeführt wurde . Vielleicht ist das eine falsche Interpretation der (schwer verständlichen) Spezifikation, oder obwohl sie nicht wörtlich gesprochen wird, interpretieren alle Browser return falsedie gleiche Interpretation wie event.preventDefault(). Aber ich weiß nicht; Es reicht aus, wenn ich das mit einer Prise Salz nehme.
Mark Amery
9
Ich hasse es,
wenn
Er hat es sowohl als JavaScript als auch als jQuery markiert, und beide sind korrekt. jQueryist lediglich eine Teilmenge von JavaScript, nicht eine eigene Sprache.
ProfK
67

Im Allgemeinen ist Ihre erste Option ( preventDefault()) diejenige, die Sie wählen müssen, aber Sie müssen wissen, in welchem ​​Kontext Sie sich befinden und welche Ziele Sie verfolgen.

Kraftstoff Ihre Codierung hat einen großen Artikel über return false;vs event.preventDefault()vs event.stopPropagation()vsevent.stopImmediatePropagation() .

JAAulde
quelle
@ VisruthCV Siehe meine hinzugefügte Notiz mit Link zur Archivversion
JAAulde
57

Wenn Sie jQuery verwenden, werden return falsebeim Aufrufen drei verschiedene Dinge ausgeführt:

  1. event.preventDefault();
  2. event.stopPropagation();
  3. Stoppt die Rückrufausführung und kehrt beim Aufruf sofort zurück.

Weitere Informationen und Beispiele finden Sie unter jQuery-Ereignisse: Stop (Mis) Using Return False .

James Drinkard
quelle
Wenn andere Teile des Codes dieses Ereignis abhören, wird event.stopPropagation (); wird ihren Rückruf abbrechen?
Ferkze
41

Sie können viele Funktionen onClickfür ein Element an das Ereignis hängen . Wie können Sie sicher sein, dass falsederjenige der letzte ist, der feuert? preventDefaultAuf der anderen Seite wird definitiv nur das Standardverhalten des Elements verhindert.

Eldar Djafarov
quelle
20

Ich glaube

event.preventDefault()

ist die von w3c angegebene Methode zum Abbrechen von Ereignissen.

Sie können dies in der W3C-Spezifikation zur Ereignisabbruch lesen .

Außerdem können Sie return false nicht in jeder Situation verwenden. Wenn Sie im href-Attribut eine Javascript-Funktion angeben und false zurückgeben, wird der Benutzer auf eine Seite mit falsch geschriebener Zeichenfolge umgeleitet.

rahul
quelle
4
Nicht in einem Browser, den ich jemals getroffen habe. Vielleicht verwechseln Sie das mit <a href="javascript:return false"oder so?
Mplungjan
10
-1; Die Behauptung, dass eine href, die false zurückgibt, eine Textseite mit dem Wort "false" generiert, ist völliger Unsinn.
Mark Amery
1
(minus) 1; defekter Link + kompletter Unsinn
Phil
15

Ich denke, der beste Weg, dies zu tun, ist die Verwendung, event.preventDefault()denn wenn im Handler eine Ausnahme ausgelöst wird, dann die Rückgabefalse Anweisung übersprungen und das Verhalten ist entgegengesetzt zu dem, was Sie wollen.

Wenn Sie jedoch sicher sind, dass der Code keine Ausnahmen auslöst, können Sie eine beliebige Methode verwenden.

Wenn Sie dennoch mit der Rückgabe fortfahren möchten, falsekönnen Sie Ihren gesamten Handler-Code wie folgt in einen Try-Catch-Block einfügen:

$('a').click(function (e) {
  try{
      your code here.........
  }
   catch(e){}
  return false;
});
Naga Srinu Kapusetti
quelle
1

Meine Meinung aus meiner Erfahrung sagt, dass es immer besser ist, zu verwenden

event.preventDefault() 

Praktisch, um das Senden eines Ereignisses zu stoppen oder zu verhindern, wann immer wir es benötigen, anstatt dass es gut return false event.preventDefault()funktioniert.

Dilip0165
quelle
11
Besser warum? Sie haben hier buchstäblich keine Rechtfertigung gegeben. -1.
Mark Amery
Wenn mehrere Ereignisbindungen vorhanden sind, ist e.preventDefault () zielgerichteter als die Rückgabe von false.
Taiger
preventDefaultist ein paar englische Wörter, die ich verstehe "verhindert die Standardeinstellung". return falseist ein paar englische Wörter, die ich verstehe "gibt falsch zurück", aber ich habe keine Ahnung warum, bis ich diesen kryptischen Code google. Und Bonus kann ich separat steuern stopPropagationund preventDefault .
Joan
1

Der Hauptunterschied zwischen return falseund event.preventDefault()besteht darin, dass Ihr Code unten return falsenicht ausgeführt wird und inevent.preventDefault() falls Ihr Code nach dieser Anweisung ausgeführt wird.

Wenn Sie return false schreiben, erledigen Sie hinter den Kulissen die folgenden Dinge für Sie.

* Stops callback execution and returns immediately when called.
* event.stopPropagation();
* event.preventDefault();
Abdullah Shoaib
quelle
1

e.preventDefault ();

Es stoppt einfach die Standardaktion eines Elements.

Instanz Ex.:-

Verhindert, dass der Hyperlink der URL folgt, und verhindert, dass die Schaltfläche "Senden" das Formular sendet. Wenn Sie viele Ereignishandler haben und nur verhindern möchten, dass Standardereignisse und viele Male auftreten, müssen wir dies oben in der Funktion () verwenden.

Grund:-

Der Grund für die Verwendung e.preventDefault();ist, dass in unserem Code, damit im Code etwas schief geht, der Link oder das Formular ausgeführt werden kann, um gesendet zu werden, oder dass Sie die erforderlichen Aktionen ausführen oder zulassen können. Die Schaltfläche & Link oder Senden wird gesendet und ermöglicht weiterhin die Weitergabe des Ereignisses.

<!DOCTYPE html>
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title></title>
   </head>
   <body>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <a href="https://www.google.com" onclick="doSomethingElse()">Preventsss page from redirect</a>
      <script type="text/javascript">
         function doSomethingElse(){
           console.log("This is Test...");
         }
         $("a").click(function(e){
          e.preventDefault(); 
         });
      </script>
   </body>
</html>

falsch zurückgeben;

Es stoppt einfach die Ausführung der Funktion ().

" return false;" beendet die gesamte Ausführung des Prozesses.

Grund:-

Der Grund für die Verwendung von return false; ist, dass Sie die Funktion nicht mehr im strengen Modus ausführen möchten.

<!DOCTYPE html>
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title></title>
   </head>
   <body>
      <a href="#" onclick="returnFalse();">Blah</a>
      <script type="text/javascript">
         function returnFalse(){
         console.log("returns false without location redirection....")
             return false;
             location.href = "http://www.google.com/";
         
         }
      </script>
   </body>
</html>

Parth Raval
quelle
1

Grundsätzlich kombinieren Sie auf diese Weise Dinge, da jQuery ein Framework ist, das sich hauptsächlich auf HTML-Elemente konzentriert. Sie verhindern im Grunde die Standardeinstellung, stoppen aber gleichzeitig die Weitergabe, um zu sprudeln.

Wir können also einfach sagen, dass die Rückgabe von false in jQuerygleich ist:

return false ist e.preventDefault UND e.stopPropagation

Vergessen Sie aber auch nicht, dass alles in jQuery- oder DOM-bezogenen Funktionen enthalten ist. Wenn Sie es für das Element ausführen, wird im Grunde verhindert, dass alles ausgelöst wird, einschließlich des Standardverhaltens und der Weitergabe des Ereignisses.

Grundsätzlich sollten Sie vor Beginn der Verwendung return false;zunächst verstehen, was e.preventDefault();unde.stopPropagation(); tun. Wenn Sie der Meinung sind, dass Sie beide gleichzeitig benötigen, verwenden Sie sie einfach.

Also im Grunde dieser Code unten:

$('div').click(function () {
  return false;
});

ist gleich diesem Code:

$('div').click(function (event) {
  event.preventDefault();
  event.stopPropagation();
});
Alireza
quelle
1

Nach meiner Erfahrung wird event.stopPropagation () hauptsächlich in CSS-Effekten oder Animationsarbeiten verwendet, z. B. wenn Sie einen Hover-Effekt sowohl für die Karte als auch für das Schaltflächenelement haben. Wenn Sie mit der Maus über die Schaltfläche fahren, werden in diesem Fall sowohl der Karten- als auch der Schaltflächen-Hover-Effekt ausgelöst Sie können event.stopPropagation () verwenden, um das Sprudeln von Aktionen zu stoppen, und event.preventDefault () dient dazu, das Standardverhalten von Browseraktionen zu verhindern. Sie haben beispielsweise ein Formular, aber Sie haben nur ein Klickereignis für die Übermittlungsaktion definiert. Wenn der Benutzer das Formular durch Drücken der Eingabetaste sendet, den durch das Tastendruckereignis ausgelösten Browser und nicht Ihr Klickereignis hier, sollten Sie event.preventDefault () verwenden, um Unangemessenheit zu vermeiden Verhalten. Ich weiß nicht, was zum Teufel falsch zurückkommt; Für weitere Erläuterungen besuchen Sie diesen Link und spielen Sie mit Zeile 33https://www.codecademy.com/courses/introduction-to-javascript/lessons/requests-i/exercises/xhr-get-request-iv

Sathish Shajahan
quelle