Frage event.preventDefault () und return false


Wenn ich verhindern möchte, dass andere Event-Handler 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 das 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 einfacher, kürzer und wahrscheinlich weniger fehleranfällig als das Ausführen einer Methode. Bei dieser Methode müssen Sie sich an die korrekte Hülle, die Klammer usw. erinnern.

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


2646
2017-08-31 11:58


Ursprung


Antworten:


return false von innerhalb eines jQuery-Event-Handlers ist praktisch das Gleiche wie das Anrufen von beiden e.preventDefault und e.stopPropagation auf dem vorbei jQuery.Event-Objekt.

e.preventDefault() verhindert das Auftreten des Standard-Ereignisses, e.stopPropagation() verhindert, dass das Ereignis hochbrennt und return false wird beides tun. Beachten Sie, dass sich dieses Verhalten von unterscheidet normal (Nicht-jQuery) Event-Handler, in denen insbesondere return false tut nicht Stoppen Sie das Ereignis aus dem Sprudeln.

Quelle: John Resig

Ein Vorteil für die Verwendung von event.preventDefault () gegenüber "return false", um einen href-Klick aufzuheben?


2596
2017-08-31 12:05



Aus meiner Erfahrung gibt es mindestens einen klaren Vorteil bei der Verwendung von event.preventDefault () gegenüber der Verwendung von return false. Angenommen, Sie erfassen das Klickereignis auf einem Anker-Tag, 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 Navigation durch den Browser zu verhindern, öffnet sich die Möglichkeit, dass der Interpreter die return-Anweisung nicht erreicht und der Browser das Standardverhalten des anchor-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 von event.preventDefault () liegt darin, dass Sie diese 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.
});

392
2018-01-22 22:37



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 verlinktes Zitat von John Resig (im Karim79 ist  Botschaft) scheinen das grundlegende Missverstä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. Es stoppt die Ereignisausbreitung nicht. Event-Handler haben seit den alten Zeiten von Netscape Navigator immer so gearbeitet.

Das Dokumentation von MDN erklärt wie return false in einem Event-Handler funktioniert

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

Für weitere Informationen, siehe attachEvent auf MSDN und das W3C DOM 2 Ereignisdokumentation.


89
2018-06-20 21:31



Im Allgemeinen, Ihre erste Option (preventDefault()) ist derjenige, der zu nehmen ist, aber Sie müssen wissen, in welchem ​​Kontext Sie sind und was Ihre Ziele sind.

Tanken Sie Ihre Codierung hat eine tolle Sache Artikel über return false; vs event.preventDefault() vs event.stopPropagation() vs event.stopImmediatePropagation().

HINWEIS: Das Tanken Sie Ihre Codierung Link oben erzeugt seit einiger Zeit 5xx Fehler. Ich habe eine Kopie davon in der gefunden Internetarchiv, druckte es in PDF und legte es in Dropbox: Archiviert Artikel über return false; vs event.preventDefault() vs event.stopPropagation() vs event.stopImmediatePropagation()  (PDF)


58
2018-04-09 18:32



Wenn Sie jQuery verwenden, return false macht 3 verschiedene Dinge, wenn du es nennst:

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

Sehen jQuery-Ereignisse: Stop (Mis) Verwenden der Rückgabe Falsch für mehr Informationen und Beispiele.


51
2018-02-19 15:54



Sie können eine Menge Funktionen auf dem hängen onClick Ereignis für ein Element. Wie können Sie sicher sein, dass false Einer wird der Letzte sein, der feuert? preventDefault Auf der anderen Seite wird definitiv nur das Standardverhalten des Elements verhindern.


37
2017-08-31 12:02



Ich denke

event.preventDefault()

ist der w3c spezifizierte Weg Ereignisse zu löschen.

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

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


17
2017-08-31 12:04



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

Wenn Sie jedoch sicher sind, dass der Code keine Ausnahmen auslöst, können Sie die gewünschte Methode wählen.

Wenn Sie immer noch mit der Rückkehr gehen wollen false, dann können Sie Ihren gesamten Handler-Code wie folgt in einen try catch-Block schreiben:

$('a').click(function (e) {
  try{
      your code here.........
  }
   catch(e){}
  return false;
});

13
2018-03-09 19:27



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

event.preventDefault() 

Praktisch         zu stoppen oder zu verhindern submit event, wann immer wir benötigt, anstatt return false event.preventDefault() funktioniert gut.


0
2017-09-29 11:28



Der Hauptunterschied zwischen return false und event.preventDefault() ist das dein Code unten return false wird nicht ausgeführt und in event.preventDefault() Falls Ihr Code nach dieser Anweisung ausgeführt wird.

Wenn du return false schreibst, mache ich hinter den Kulissen folgende Dinge für dich.

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

0
2018-02-09 08:14



e.preventDefault ();

Es stoppt einfach die Standardaktion eines Elements.

Instanz Ex.:-

Verhindert, dass der Hyperlink der URL folgt, verhindert, dass die Übergabeschaltfläche das Formular sendet. Wenn Sie viele Ereignisbehandlungsroutinen haben und nur verhindern wollen, dass ein Standardereignis auftritt und viele Male auftreten, Dafür müssen wir oben in der Funktion () verwenden.

Grund:-

Der Grund zu verwenden e.preventDefault(); ist das in unserem Code so etwas schief geht im Code, dann wird es erlauben, den Link oder das Formular auszuführen, um gesendet zu werden oder zu erlauben, auszuführen oder zu erlauben, was auch immer Sie tun müssen. & link oder submit button wird gesendet und erlaubt die weitere Verbreitung des Events.

<!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;"wird die ganze Ausführung des Prozesses beenden.

Grund:-

Der Grund, um zu verwenden, gibt false zurück; ist, dass Sie die Funktion nicht mehr im strikten 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>


0
2018-04-27 06:55