event.preventDefault () vs. return false

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?

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?

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

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 .

Ogólnie rzecz biorąc, pierwszą opcją ( preventDefault()) jest ta, którą musisz wziąć, ale musisz wiedzieć, w jakim kontekście jesteś i jakie są twoje cele.

Paliwowego Kodowanie ma wielki artykuł o return false;vs event.preventDefault()vs event.stopPropagation()vsevent.stopImmediatePropagation() .

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.

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.

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.

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

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.

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

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>

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

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