wydarzenie.preventDefault () vs. return false

Z mojego doświadczenia wynika, że jest co najmniej jedna wyraźna przewaga podczas korzystania z eventu.preventDefault () zamiast zwracania false. Załóżmy, że rejestrujesz Zdarzenie kliknięcia na znaczniku zakotwiczenia, w przeciwnym razie byłoby to dużym problemem, gdyby użytkownik był nawigowany z dala od bieżącej strony. Jeśli program obsługi kliknięć używa return false, aby zapobiec nawigacji w przeglądarce, otwiera to możliwość, że interpreter nie dotrze do instrukcji return, a przeglądarka rozpocznie wykonywanie znacznika kotwicy domyślne zachowanie.

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

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

  return false;
});

Korzyści z używania zdarzenia.preventDefault() polega na tym, że można ją dodać jako pierwszą linię w funkcji obsługi, gwarantując tym samym, że domyślne zachowanie kotwicy nie zostanie uruchomione, niezależnie od tego, czy ostatnia linia funkcji nie zostanie osiągnięta (np. błąd runtime).

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

  // custom handling here

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

To nie jest, jak to nazwałeś, pytanie "JavaScript"; jest to pytanie dotyczące projektu jQuery.

JQuery i poprzednio linkowane cytaty z John Resig (w karim79 ' S message ) wydaje się być źródłem niezrozumienia sposobu działania programów obsługi zdarzeń w ogóle.

Fact: Obsługa zdarzenia, która zwraca false, zapobiega domyślnej akcji dla tego zdarzenia. Nie zatrzymuje propagacji zdarzenia. Obsługa zdarzeń zawsze działała w ten sposób, od dawnych czasów Netscape Navigator.

Dokumentacja z MDN wyjaśnia, w jaki sposób return false działa obsługa zdarzeń

To, co dzieje się w jQuery, nie jest tym samym, co dzieje się z programami obsługi zdarzeń. DOM event listeners i MSIE events "attached" to zupełnie inna sprawa.

Aby dowiedzieć się więcej, Zobacz attachEvent na MSDN i W3C DOM 2 Dokumentacja zdarzeń.

Ogólnie rzecz biorąc, pierwszą opcją (preventDefault()) jest ta, którą należy wziąć, ale musisz wiedzieć, w jakim kontekście się znajdujesz i jakie są Twoje cele.

Fuel Your Coding has a great article on return false; vs event.preventDefault() vs event.stopPropagation() vs event.stopImmediatePropagation().

Uwaga: powyższy link generuje błędy 5xx już od dłuższego czasu. Znalazłem jego kopię w Internet Archive , wydrukowałem do PDF i umieściłem w Dropbox: zarchiwizowane artykuł o return false; vs event.preventDefault() vs event.stopPropagation() vs event.stopImmediatePropagation() (PDF)

Podczas korzystania z jQuery, return false robi 3 oddzielne rzeczy, gdy go wywołasz:

1. event.preventDefault();
2. event.stopPropagation();
3. zatrzymuje wywołanie zwrotne i powraca natychmiast po wywołaniu.

Zobacz jQuery Events: Stop (Mis)Using Return False aby uzyskać więcej informacji i przykładów.

Można zawiesić wiele funkcji na zdarzeniu onClick dla jednego elementu. Skąd możesz mieć pewność, że ten[1]] będzie ostatnim, który strzeli? preventDefault z drugiej strony na pewno zapobiegnie tylko domyślnemu zachowaniu elementu.

Myślę

event.preventDefault()

Jest określonym przez w3c sposobem anulowania zdarzeń.

Możesz to przeczytać w specyfikacji W3C na Event cancelation .

Nie można również używać return false w każdej sytuacji. Gdy podasz funkcję javascript w atrybutie href i jeśli zwrócisz false, użytkownik zostanie przekierowany do strony z napisanym false.

Myślę, że najlepszym sposobem na to jest użycie event.preventDefault(), ponieważ jeśli jakiś wyjątek zostanie podniesiony w funkcji obsługi, wtedy Instrukcja return false zostanie pominięta i zachowanie będzie odwrotne do tego, co chcesz.

Ale jeśli jesteś pewien, że kod nie wywoła żadnych WYJĄTKÓW, możesz użyć dowolnej metody, którą chcesz.

Jeśli nadal chcesz przejść z return false, możesz umieścić cały kod obsługi w bloku try catch jak poniżej:

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

Moja opinia z mojego doświadczenia mówi, że zawsze lepiej jest używać

event.preventDefault() 

Praktycznie aby zatrzymać lub zapobiec zdarzeniu submit, gdy jest to wymagane, a nie return false Działa dobrze.

Główna różnica pomiędzy return false i event.preventDefault() jest taka, że Twój kod poniżej return false nie zostanie wykonany, a w event.preventDefault() w przypadku, gdy twój kod zostanie wykonany po tej instrukcji.

Kiedy napiszesz return false, wykonaj następujące czynności za kulisami.

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

E. preventDefault();

Po prostu zatrzymuje domyślne działanie elementu.

Przykład Ex.:-

Zapobiega śledzeniu adresu URL przez hiperłącze, zapobiega wysyłaniu formularza przez przycisk submit. Gdy masz wiele procedur obsługi zdarzeń i chcesz po prostu zapobiec wystąpieniu zdarzenia domyślnego, i występowaniu od wielu razy, w tym celu musimy użyć w górnej części funkcji ().

Powód:-

Powodem użycia e.preventDefault(); jest że w naszym kodzie tak coś idzie nie tak w kodzie, to pozwoli na wykonanie linku lub formularza, aby uzyskać przesłane lub pozwalają na wykonanie lub zezwolić na jakąkolwiek akcję trzeba zrobić. przycisk & link lub submit zostanie przesłany i nadal pozwoli na dalszą propagację wydarzenia.

<!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>

Return False;

Po prostu zatrzymuje wykonywanie funkcji ().

"return false;" zakończy całą realizację procesu.

Powód:-

Powodem użycia return false; Jest to, że nie chcesz już wykonywać funkcji w trybie ściśle określonym.

<!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>

Zasadniczo, w ten sposób łączysz rzeczy, ponieważ jQuery jest frameworkiem, który głównie skupia się na elementach HTML, zasadniczo zapobiegasz domyślnemu, ale jednocześnie przestajesz propagować, aby zrobić bańkę.

Więc możemy po prostu powiedzieć, return false in {[2] } jest równe:

Return false to e. preventDefault oraz e. stopPropagation

Ale również nie zapominaj, że to wszystko jest w funkcjach związanych z jQuery lub DOM, gdy uruchomisz je na elemencie, zasadniczo zapobiega to wszystko od strzału włącznie z domyślnym zachowaniem i rozprzestrzenianiem się zdarzenia.

Zasadniczo przed rozpoczęciem używania return false;, najpierw zrozum, co robią e.preventDefault(); i e.stopPropagation();, a następnie, jeśli uważasz, że potrzebujesz obu w tym samym czasie, po prostu go użyj.

Więc w zasadzie ten kod poniżej:

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

Jest równe temu kodowi:

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