event.preventDefault () vs. return false

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?

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?

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.
});

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 .

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() .

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 .

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.

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.

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;
});

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.

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();

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>

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();
});

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