event.preventDefault () vs. return false

2959

Jeśli chcę uniemożliwić wykonywanie innych procedur obsługi zdarzeń po uruchomieniu określonego zdarzenia, mogę użyć jednej z dwóch technik. W przykładach użyję jQuery, ale dotyczy to również 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 istnieje jakaś znacząca różnica między tymi dwiema metodami zatrzymywania propagacji zdarzeń?

Dla mnie return false;jest prostszy, krótszy i prawdopodobnie mniej podatny na błędy niż wykonywanie metody. Metodą należy pamiętać o prawidłowej obudowie, nawiasie itp.

Ponadto muszę zdefiniować pierwszy parametr w wywołaniu zwrotnym, aby móc wywołać metodę. Być może istnieje kilka powodów, dla których powinienem unikać robienia tego w ten sposób i preventDefaultzamiast tego używać ? Jaki jest lepszy sposób?

RaYell
źródło
172
Należy pamiętać, że jQuery preventDefaultjest nie uniemożliwić innym handers z wykonaniem. Po to stopImmediatePropagationjest.
Crescent Fresh
19
@CrescentFresh, uniemożliwia innym (później związanym) modułom obsługi wykonanie ... w węźle DOM, na którym uruchamiane jest zdarzenie. Po prostu nie zapobiega rozprzestrzenianiu się.
powiek
37
To nie są „dwie metody zatrzymywania propagacji zdarzeń?” e.preventDefault (); zapobiega domyślnej akcji, nie zatrzymuje propagacji zdarzeń, która jest wykonywana przez e.stopPropagation ().
Timo Tijhof,
24
To pytanie i odpowiedzi dotyczą jQuery. Jeśli przyszedłeś tutaj, szukając prostej odpowiedzi w javascript, zobacz event.preventDefault () vs. return false (no jQuery)
Oriol
5
Ta odpowiedź zawiera tabelę wyjaśniającą wszystko stackoverflow.com/a/5302939/759452
Adrien Be

Odpowiedzi:

2817

return falsez poziomu modułu obsługi zdarzeń jQuery działa tak samo, jak wywoływanie obu e.preventDefaulti e.stopPropagationna przekazany obiekt jQuery.Event.

e.preventDefault()zapobiegnie wystąpieniu zdarzenia domyślnego, e.stopPropagation()zapobiegnie pojawieniu się zdarzenia i return falsezrobi jedno i drugie. Należy zauważyć, że ten różni się od zachowania normalnego (nie jQuery) obsługi zdarzeń, w której, w szczególności, return falseczy nie zatrzymania fazy spienieniu się.

Źródło: John Resig

Jakieś korzyści z używania event.preventDefault () nad „return false” w celu anulowania kliknięcia href?

karim79
źródło
126
return falsez modułu obsługi DOM2 ( addEventListener) w ogóle nic nie robi (ani nie zapobiega ustawieniu domyślnemu, ani nie przestaje attachEventpropagować; od modułu obsługi DOM2 firmy Microsoft ( ), zapobiega domyślnemu, ale nie propagacji; z modułu obsługi DOM0 ( onclick="return ..."), zapobiega domyślnemu (pod warunkiem umieścisz returnw atrybucie), ale nie propagujesz; z procedury obsługi zdarzeń jQuery robi to obie, ponieważ jest to jQuery. Szczegóły i testy na żywo tutaj
TJ Crowder
12
Pomocne byłoby zdefiniowanie tutaj „Rozmnażania” i „Domyślnego”. Dla jednego ciągle je mylę. Czy to jest poprawne? Propagacja = mój kod (procedury obsługi zdarzeń JavaScript dla elementów nadrzędnych). Domyślnie = kod przeglądarki (linki, zaznaczanie tekstu itp.)
Bob Stein
5
co tak naprawdę znaczy bąbelkowanie? przykład?
Govinda Sakhare
5
+1 dla zauważając, że return falsema nie zatrzymać propagacji zdarzeń w obsługi zdarzeń non-jQuery. tzn <a href="#" onclick="return false">Test</a>czy nie zatrzymać zdarzenie od propagacji w górę.
Doug S
424

Z mojego doświadczenia wynika, że ​​istnieje co najmniej jedna wyraźna przewaga podczas używania event.preventDefault () nad używaniem return false. Załóżmy, że przechwytujesz zdarzenie kliknięcia w tagu zakotwiczenia, w przeciwnym razie byłby to duży problem, gdyby użytkownik został odsunięty od bieżącej strony. Jeśli program obsługi kliknięć używa return false w celu uniemożliwienia nawigacji w przeglądarce, otwiera to możliwość, że interpreter nie dotrze do instrukcji return, a przeglądarka rozpocznie domyślne zachowanie tagu kotwicy.

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

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

  return false;
});

Zaletą użycia event.preventDefault () jest to, że możesz dodać to jako pierwszą linię w module obsługi, gwarantując w ten sposób, że domyślne zachowanie kotwicy nie zostanie uruchomione, niezależnie od tego, czy nie zostanie osiągnięty ostatni wiersz funkcji (np. Błąd czasu wykonywania ).

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

  // custom handling here

  // oops...runtime error, but at least the user isn't navigated away.
});
Jeff Poulton
źródło
68
Chociaż jest prawdą, odwrotne zachowanie jest często preferowane w przypadku stopniowego ulepszania (co, jak sądzę, jest prawdopodobnie najbardziej prawdopodobnym powodem
zastąpienia
Oba sposoby blokują domyślne zachowanie zdarzenia, to tylko kwestia tego, jaki problem próbujesz rozwiązać.
Ferkze
102

To nie jest, jak to ująłeś, pytanie „JavaScript”; jest to pytanie dotyczące projektu jQuery.

jQuery i poprzednio powiązany cytat z Jana Resig (w karim79 za wiadomości ) wydają się być źródłem nieporozumień, w jaki sposób obsługi zdarzeń w ogólnej pracy.

Fakt: Procedura obsługi zdarzenia, która zwraca wartość false, uniemożliwia domyślną akcję dla tego zdarzenia. Nie zatrzymuje propagacji zdarzeń. Procedury obsługi zdarzeń zawsze działały w ten sposób, od dawnych czasów Netscape Navigator.

Dokumentacja z MDN wyjaśnia, jak return falsew działa obsługa zdarzeń

To, co dzieje się w jQuery, nie jest tym samym, co dzieje się z procedurami obsługi zdarzeń. Odbiorniki zdarzeń DOM i „załączone” zdarzenia MSIE to zupełnie inna sprawa.

Więcej informacji można znaleźć w attachEvent na MSDN i w dokumentacji W3C DOM 2 Events .

Garrett
źródło
6
@rds To mówi: „preventDefault nie zatrzymuje dalszej propagacji zdarzenia przez DOM. W tym celu należy użyć event.stopPropagation”.
Garrett,
Odpowiedź na ściśle powiązane pytanie twierdzi, że przed HTML 5, wracając false z obsługi zdarzeń nie została specced jak robi nic w ogóle. Być może jest to nieprawidłowa interpretacja (trudnej do zrozumienia) specyfikacji, a może pomimo jej braku dosłownie wszystkie przeglądarki interpretują return falseto samo event.preventDefault(). Ale nie wiem; wystarczy, żebym wziął to ze szczyptą soli.
Mark Amery
9
Nienawidzę tego, jak każdy wynik wyszukiwania javascript w Google dotyczy jQuery, +1
Alexander Derck
Oznacził go zarówno jako JavaScript, jak i jQuery, i oba są poprawne. jQueryjest jedynie podzbiorem JavaScript, a nie własnym językiem.
ProfK
57

Korzystając z jQuery, return falserobi 3 osobne rzeczy, gdy go wywołujesz:

  1. event.preventDefault();
  2. event.stopPropagation();
  3. Zatrzymuje wykonanie wywołania zwrotnego i natychmiast wraca po wywołaniu.

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

James Drinkard
źródło
Jeśli inne części kodu nasłuchują tego zdarzenia, event.stopPropagation (); anuluje ich oddzwonienie?
Ferkze
41

Możesz zawiesić wiele funkcji na onClickzdarzeniu dla jednego elementu. Jak możesz być pewien, że falseten będzie ostatnim, który strzela? preventDefaultz drugiej strony na pewno zapobiegnie tylko domyślnemu zachowaniu elementu.

Eldar Djafarov
źródło
20

Myślę

event.preventDefault()

to określony przez w3c sposób anulowania zdarzeń.

Możesz to przeczytać w specyfikacji W3C w sprawie anulowania zdarzeń .

Nie możesz również użyć return 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 zapisanym fałszywym łańcuchem.

Rahul
źródło
4
Nie w żadnej przeglądarce, jaką kiedykolwiek spotkałem. Być może mylisz to z <a href="javascript:return false"czymś?
mplungjan
10
-1; twierdzenie, że href, który zwraca false, wygeneruje stronę tekstową z napisem „false”, jest kompletnym nonsensem.
Mark Amery
1
(minus) 1; zepsuty link + kompletne bzdury
Phil
15

Myślę, że najlepszym sposobem na to jest użycie, event.preventDefault()ponieważ jeśli w module obsługi zostanie zgłoszony jakiś wyjątek, wówczas jest to returnfalse zostanie pominięta, a zachowanie będzie przeciwne do tego, co chcesz.

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

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

$('a').click(function (e) {
  try{
      your code here.........
  }
   catch(e){}
  return false;
});
Naga Srinu Kapusetti
źródło
1

Z mojego doświadczenia wynika, że ​​zawsze lepiej jest używać

event.preventDefault() 

Praktycznie, aby zatrzymać lub uniemożliwić przesłanie zdarzenia, ilekroć jest to wymagane, a nie return false event.preventDefault()działa dobrze.

Dilip0165
źródło
11
Lepiej dlaczego? Dosłownie podałeś tutaj zerowe uzasadnienie. -1.
Mark Amery
W przypadku wielu powiązań zdarzeń funkcja e.preventDefault () jest bardziej ukierunkowana niż zwracana wartość false.
Taiger
preventDefaultto angielskie słowo, które rozumiem „zapobiega domyślnemu”. return falseto angielskie słowa. Rozumiem, że „zwraca fałsz”, ale nie mam pojęcia, dlaczego, dopóki nie opublikuję tego tajemniczego kodu w Google. I bonus, mogę kontrolować osobno stopPropagationi preventDefault .
Joan
1

Główna różnica między return falsei event.preventDefault()polega na tym, że poniższy kod return falsenie zostanie wykonany, a event.preventDefault()jeśli kod zostanie wykonany po tej instrukcji.

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

* Stops callback execution and returns immediately when called.
* event.stopPropagation();
* event.preventDefault();
Abdullah Shoaib
źródło
1

e.preventDefault ();

Po prostu zatrzymuje domyślną akcję elementu.

Wystąpienie np .:

uniemożliwia śledzenie hiperłącza za pomocą adresu URL, uniemożliwia przycisk przesłania formularza. Jeśli masz wiele programów obsługi zdarzeń i chcesz po prostu zapobiec wystąpieniu zdarzenia domyślnego i występowaniu go wiele razy, w tym celu musimy użyć górnej części funkcji ().

Powód:-

Powodem użycia e.preventDefault();jest to, że w naszym kodzie coś jest nie tak z kodem, to pozwoli na wykonanie linku lub formularza w celu przesłania lub pozwoli na wykonanie lub zezwolenie na cokolwiek, co musisz zrobić. & link lub przycisk Prześlij zostanie przesłany i nadal pozwoli 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>

zwrócić False;

Po prostu zatrzymuje wykonywanie funkcji ().

return false;” zakończy wykonywanie całego procesu.

Powód:-

Powód użycia return 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>

Parth Raval
źródło
1

Zasadniczo w ten sposób łączysz rzeczy, ponieważ jQuery jest strukturą, która skupia się głównie na elementach HTML, w zasadzie zapobiegasz domyślnemu, ale jednocześnie przestajesz propagować, aby się rozwinąć.

Możemy więc po prostu powiedzieć, że wartość false jQueryjest równa:

return false to e.preventDefault AND e.stopPropagation

Ale nie zapominaj również, że wszystko jest w funkcjach związanych z jQuery lub DOM, kiedy uruchamiasz go na elemencie, w zasadzie uniemożliwia to uruchomienie wszystkiego, w tym domyślne zachowanie i propagację zdarzenia.

Zasadniczo przed użyciem return false;należy najpierw zrozumieć, co zrobić e.preventDefault();i e.stopPropagation();zrobić, a następnie, jeśli uważasz, że potrzebujesz obu w tym samym czasie, po prostu użyj go.

Więc w zasadzie ten kod poniżej:

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

jest równy temu kodowi:

$('div').click(function (event) {
  event.preventDefault();
  event.stopPropagation();
});
Alireza
źródło
1

Z mojego doświadczenia wynika, że ​​event.stopPropagation () jest używany głównie w efektach CSS lub w pracach animacyjnych, na przykład gdy masz efekt najechania na element karty i przycisku, kiedy najedziesz na przycisk, efekt aktywacji karty i przycisku zostanie w tym przypadku wywołany , możesz użyć event.stopPropagation () do zatrzymania propagacji akcji, a event.preventDefault () służy do zapobiegania domyślnemu zachowaniu akcji przeglądarki. Na przykład masz formularz, ale zdefiniowałeś tylko zdarzenie kliknięcia dla akcji wysyłania, jeśli użytkownik prześle formularz naciskając Enter, przeglądarka wywoływana zdarzeniem naciśnięcia klawisza, a nie zdarzenie kliknięcia tutaj, powinieneś użyć event.preventDefault (), aby uniknąć niewłaściwego zachowanie. Nie wiem, co to do diabła, jest fałszywe; przepraszam. Aby uzyskać więcej wyjaśnień, odwiedź ten link i pobaw się z linią 33https://www.codecademy.com/courses/introduction-to-javascript/lessons/requests-i/exercises/xhr-get-request-iv

Sathish Shajahan
źródło