Pytanie event.preventDefault () vs. return false


Kiedy chcę zapobiec wykonywaniu innych programów obsługi zdarzeń po uruchomieniu określonego zdarzenia, mogę użyć jednej z dwóch technik. Użyję jQuery w przykładach, ale odnosi się to również do zwykłego JS:

1. event.preventDefault()

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

2. return false

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

Czy jest jakaś znacząca różnica między tymi dwoma metodami zatrzymywania propagacji zdarzeń?

Dla mnie, return false; jest prostszy, krótszy i prawdopodobnie mniej podatny na błędy niż wykonanie metody. Przy tej metodzie trzeba pamiętać o prawidłowej obudowie, nawiasach itp.

Ponadto muszę zdefiniować pierwszy parametr wywołania zwrotnego, aby móc wywołać metodę. Być może są pewne powody, dla których powinienem unikać robienia tego w ten sposób i używać preventDefault zamiast? Jaki jest lepszy sposób?


2652
2017-08-31 11:58


pochodzenie


Zauważ, że jQuery's preventDefault robi nie uniemożliwić wykonywanie innych handlerów. Właśnie to stopImmediatePropagation jest dla. - Crescent Fresh
@CrescentFresh, uniemożliwia wykonywanie innych (zsuniętych) procedur obsługi ... na węźle DOM, w którym uruchamiane jest zdarzenie. Po prostu nie zapobiega rozprzestrzenianiu się. - eyelidlessness
To nie są "dwie metody zatrzymywania propagacji zdarzeń?" e.preventDefault (); zapobiega domyślnej akcji, nie zatrzymuje propagacji zdarzeń, co jest wykonywane przez e.stopPropagation (). - Krinkle
To pytanie i jego odpowiedzi dotyczą jQuery. Jeśli przyszedłeś tutaj szukając prostej odpowiedzi javascript, zobacz event.preventDefault () vs. return false (bez jQuery) - Oriol
preventDefault (), stopPropagation (), stopImmediatePropagation (), return false, wszystkie te 4 metody są używane do anulowania zdarzenia lub uniemożliwienia jego przepuszczania. trochę informacji tutaj: markupjavascript.blogspot.in/2013/10/... - Mandeep Pasbola


Odpowiedzi:


return false od w ramach obsługi zdarzeń jQuery jest faktycznie taki sam jak wywołanie obu e.preventDefault i e.stopPropagation w przeszłości Obiekt jQuery.Event.

e.preventDefault() zapobiegnie wystąpieniu zdarzenia domyślnego, e.stopPropagation() zapobiegnie bulgoczeniu zdarzenia i return false zrobi oba. Pamiętaj, że to zachowanie różni się od normalna (nie-jQuery) programy obsługi zdarzeń, w których, w szczególności, return false robi nie powstrzymaj wydarzenie od bulgotania.

Źródło: John Resig

Jakiekolwiek korzyści związane z korzystaniem z event.preventDefault () zamiast "return false", aby anulować kliknięcie href?


2601
2017-08-31 12:05



return false od handlera DOM2 (addEventListener) w ogóle nic nie robi (nie zapobiega ustawieniu domyślnemu ani nie przestaje propagować, od programu Microsoft DOM2-ish handler (attachEvent), zapobiega domyślnemu, ale nie propagacji; z obsługi DOM0 (onclick="return ..."), zapobiega domyślnemu (pod warunkiem, że dołączasz return w atrybucie), ale nie propaguje; z obsługi zdarzeń jQuery, robi to zarówno, ponieważ jest to rzecz jQuery. Szczegóły i testy na żywo tutaj - T.J. Crowder
Pomocne byłoby tutaj określenie "Propagacja" i "Domyślne". Ja jeden raz je mylę. Czy to jest poprawne? Propagacja = mój kod (obsługa zdarzeń JavaScript dla elementów nadrzędnych). Domyślna = kod przeglądarki (linki, wybór tekstu itp.) - Bob Stein
co tak naprawdę oznacza bulgotanie? przykład? - Pablo Escobar
+1 za to return false robi nie zatrzymaj propagację zdarzeń w procedurach obsługi zdarzeń innych niż jQuery. to znaczy <a href="#" onclick="return false">Test</a> robi nie powstrzymaj wydarzenie od bulgotania. - Doug S


Z mojego doświadczenia wynika, że ​​istnieje co najmniej jedna wyraźna zaleta przy korzystaniu z event.preventDefault () zamiast używania return false. Załóżmy, że przechwytujesz zdarzenie click na znaczniku zakotwiczenia, w przeciwnym razie byłby duży problem, gdyby użytkownik był nawigowany z dala od bieżącej strony. Jeśli twój moduł obsługi kliknięć używa funkcji "false", aby uniemożliwić nawigację w przeglądarce, otwiera to możliwość, że interpreter nie dotrze do instrukcji return, a przeglądarka rozpocznie wykonywanie domyślnego zachowania tagu kotwicy.

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

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

  return false;
});

Zaletą korzystania z event.preventDefault () jest to, że możesz dodać to jako pierwszą linię w procedurze 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. ).

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

  // custom handling here

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

393
2018-01-22 22:37



Wprawdzie zachowanie odwrotne jest często preferowane przy stopniowym ulepszaniu (co moim zdaniem jest prawdopodobnie najbardziej prawdopodobną przyczyną nadpisania domyślnej akcji) - meandmycode


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

jQuery i poprzednio połączony cytat od John Resig (w karim79's  wiadomość) wydają się być źródłem niezrozumienia sposobu działania programów obsługi zdarzeń w ogóle.

Fakt: procedura obsługi zdarzenia, która zwraca wartość false, zapobiega domyślnej akcji dla tego zdarzenia. Nie zatrzymuje propagacji zdarzenia. Programy obsługi zdarzeń zawsze działały w ten sposób od dawnych czasów Netscape Navigatora.

The dokumentacja z MDN wyjaśnia, jak return false w module obsługi zdarzeń działa

To, co dzieje się w jQuery, nie jest tym samym, co dzieje się z procedurami obsługi zdarzeń. Słuchacze zdarzeń DOM i "dołączone" zdarzenia MSIE są zupełnie inną sprawą.

W celu dalszego czytania zobacz attachEvent w witrynie MSDN i Dokumentacja zdarzeń W3C DOM 2.


89
2018-06-20 21:31



Co powiesz na developer.mozilla.org/en/DOM/event.preventDefault ? - rds
@rds Który mówi "preventDefault nie zatrzymuje dalszego rozprzestrzeniania się zdarzenia przez DOM. event.stopPropagation powinno być użyte do tego." - Garrett
Na odpowiedź w ściśle powiązanym z sobą pytaniu twierdzi, że przed HTML 5, zwracanie false z programu obsługi zdarzeń nie było speced jak cokolwiek robić. Być może jest to niepoprawna interpretacja (trudnej do zrozumienia) specyfikacji, a może mimo tego, że nie jest dosłownie dosłownie interpretowana przez wszystkie przeglądarki return false taki sam jak event.preventDefault(). Ale nie wiem; wystarczy, że wezmę to ze szczyptą soli. - Mark Amery
Nienawidzę tego, jak każdy wynik wyszukiwania javascript w Google jest rzeczywiście o jQuery, +1 - Alexander Derck


Zasadniczo twoja pierwsza opcja (preventDefault()) jest tym, który należy podjąć, ale musisz wiedzieć, w jakim kontekście się znajdujesz i jakie są Twoje cele.

Paliwo swoje kodowanie ma świetny artykuł na return false; vs event.preventDefault() vs event.stopPropagation() vs event.stopImmediatePropagation().

UWAGA: The Paliwo swoje kodowanie powyższy link od 5 lat tworzy błędy 5xx. Znalazłem kopię tego w Archiwum internetowe, wydrukował go do pliku PDF i umieścił w Dropbox: Zarchiwizowane artykuł na return false; vs event.preventDefault() vs event.stopPropagation() vs event.stopImmediatePropagation()  (PDF)


58
2018-04-09 18:32



Link referencyjny jest uszkodzony, daje błąd 502. - Visruth
@VisruthCV Zobacz moją dodaną notatkę z linkiem do wersji archiwalnej - JAAulde


Podczas korzystania z jQuery, return false robi 3 oddzielne rzeczy, gdy je nazwiesz:

  1. event.preventDefault();
  2. event.stopPropagation();
  3. Zatrzymuje wykonywanie wywołań zwrotnych i zwraca natychmiast po wywołaniu.

Widzieć Zdarzenia jQuery: Stop (Mis) Używanie Return Fałsz więcej informacji i przykładów.


51
2018-02-19 15:54





Możesz zawiesić wiele funkcji na onClick wydarzenie dla jednego elementu. Jak możesz być pewny false jeden będzie ostatnim, który wystrzeli? preventDefault z drugiej strony zdecydowanie zapobiegnie tylko domyślnemu zachowaniu elementu.


38
2017-08-31 12:02





Myślę

event.preventDefault()

jest określony sposób anulowania zdarzeń w3c.

Możesz to przeczytać w specyfikacji W3C Anulowanie wydarzenia.

Ponadto nie można użyć zwrotu false w każdej sytuacji. Podając funkcję javascript w atrybucie href i jeśli zwrócisz false, użytkownik zostanie przekierowany na stronę z fałszywymi napisami.


18
2017-08-31 12:04



Nie w żadnej przeglądarce, jaką kiedykolwiek spotkałem. Być może mylisz to z <a href="javascript:return false" lub coś? - mplungjan
-1; twierdzenie, że href, który zwraca wartość false, spowoduje wygenerowanie strony tekstowej z napisem "false", która jest kompletnym nonsensem. - Mark Amery
(minus) 1; zepsuty link + pełne bzdury - Phil


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

Ale jeśli masz pewność, że kod nie wywoła żadnych wyjątków, możesz zastosować dowolną metodę.

Jeśli nadal chcesz iść z powrotem false, następnie możesz umieścić cały kod obsługi w bloku catch catch jak poniżej:

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

13
2018-03-09 19:27





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

event.preventDefault() 

Praktycznie         aby zatrzymać lub uniemożliwić przesłanie zgłoszenia, gdy tylko wymagamy, a nie return false event.preventDefault() działa w porządku.


0
2017-09-29 11:28



Lepiej dlaczego? Dosłownie dałeś tutaj zerowe usprawiedliwienie. -1. - Mark Amery
W przypadku wielu powiązań zdarzeń, e.preventDefault () jest bardziej ukierunkowany niż return false. - Taiger
preventDefault jest kilka angielskich słów, które rozumiem "uniemożliwia domyślne". return false jest kilka angielskich słów, które rozumiem jako "zwraca fałsz", ale nie mam pojęcia dlaczego, dopóki nie przetestuję tego tajemniczego kodu. I bonus, mogę kontrolować oddzielnie stopPropagation i preventDefault . - Joan


Główna różnica między return false i event.preventDefault() jest to twój kod poniżej return false nie zostaną wykonane i event.preventDefault() case twój kod zostanie wykonany po tym oświadczeniu.

Kiedy piszesz return false, robisz za kulisami następujące rzeczy.

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

0
2018-02-09 08:14





e.preventDefault ();

Po prostu przerywa domyślną akcję elementu.

Instancja Ex.:-

uniemożliwia hiperłącze podążanie za adresem URL, zapobiega wysyłaniu formularza przez przycisk przesyłania. Gdy masz wiele programów obsługi zdarzeń i chcesz tylko zapobiec wystąpieniu zdarzenia domyślnego i występowaniu wiele razy, do tego musimy użyć w górnej części funkcji ().

Powód:-

Powód do użycia e.preventDefault(); jest to w naszym kodzie, więc coś jest nie tak w kodzie, to pozwoli na wykonanie linku lub formularza, aby uzyskać złożony lub pozwolić na wykonanie lub zezwolić na jakiekolwiek działanie, które musisz zrobić. Przycisk & link lub submit zostanie przesłany i nadal pozwala na dalsze rozpowszechnianie 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:-

Powód użycia zwrotu false; jest to, że nie chcesz już wykonywać tej funkcji w trybie ścisłym.

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