it-swarm.it

event.preventDefault () vs. return false

Quando voglio impedire l'esecuzione di altri gestori di eventi dopo l'attivazione di un determinato evento, posso utilizzare una delle due tecniche. Userò jQuery negli esempi, ma questo vale anche per 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;
});

C'è qualche differenza significativa tra questi due metodi di fermare la propagazione dell'evento?

Per me, return false; è più semplice, più corto e probabilmente meno incline all'errore rispetto all'esecuzione di un metodo. Con il metodo, devi ricordare il rivestimento corretto, la parentesi, ecc. 

Inoltre, devo definire il primo parametro in callback per poter chiamare il metodo. Forse, ci sono alcuni motivi per cui dovrei evitare di farlo in questo modo e usare invece preventDefault? Qual è il modo migliore?

2762
RaYell

Dalla mia esperienza, vi è almeno un chiaro vantaggio quando si usa event.preventDefault () usando return false. Supponiamo che stai catturando l'evento click su un tag di ancoraggio, altrimenti sarebbe un grosso problema se l'utente dovesse essere spostato lontano dalla pagina corrente. Se il gestore di clic utilizza false per impedire la navigazione del browser, si apre la possibilità che l'interprete non raggiunga l'istruzione di reso e il browser procederà ad eseguire il comportamento predefinito del tag di ancoraggio.

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

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

  return false;
});

Il vantaggio dell'utilizzo di event.preventDefault () è che è possibile aggiungerlo come prima riga nel gestore, garantendo in tal modo che il comportamento predefinito dell'ancora non si attivi, indipendentemente dal fatto che non venga raggiunta l'ultima riga della funzione (ad esempio errore di runtime ).

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

  // custom handling here

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

Questo non è, come tu hai intitolato, una domanda "JavaScript"; è una domanda riguardante il design di jQuery.

jQuery e la citazione precedentemente collegata from John Resig (in karim79'smessage ) sembra essere la fonte di incomprensione su come funzionano in generale i gestori di eventi. 

Fatto: un gestore di eventi che restituisce false impedisce l'azione predefinita per quell'evento. Non ferma la propagazione dell'evento. I gestori di eventi hanno sempre lavorato in questo modo, dai tempi di Netscape Navigator.

La documentazione di MDN spiega come funziona return false in un gestore di eventi

Quello che succede in jQuery non è lo stesso di quello che succede con i gestori di eventi. Gli ascoltatori di eventi DOM e gli eventi "collegati" a MSIE sono completamente diversi. 

Per ulteriori letture, vedere attachEvent su MSDN e/ W3C DOM 2 Documentazione eventi .

95
Garrett

Generalmente, la prima opzione (preventDefault()) è quella da prendere, ma devi sapere in che contesto ti trovi e quali sono i tuoi obiettivi. 

Fuel Your Coding ha un ottimo articolo su return false; vs event.preventDefault() vs event.stopPropagation() vs event.stopImmediatePropagation() .

62
JAAulde

Quando usi jQuery, return false sta facendo 3 cose separate quando lo chiami:

  1. event.preventDefault();
  2. event.stopPropagation();
  3. Arresta l'esecuzione di callback e restituisce immediatamente quando viene chiamato.

Vedi Eventi jQuery: Stop (Mis) Utilizzo di Return False per ulteriori informazioni ed esempi.

54
James Drinkard

Puoi appendere molte funzioni sull'evento onClick per un elemento. Come puoi essere sicuro che false sarà l'ultimo a sparare? preventDefault d'altra parte sicuramente preverrà solo il comportamento predefinito dell'elemento.

40
Eldar Djafarov

Credo

event.preventDefault()

è il modo specificato da w3c di cancellare eventi.

Puoi leggere questo nella specifica W3C su Annullamento dell'evento .

Inoltre non puoi usare return false in ogni situazione. Quando si attribuisce una funzione javascript nell'attributo href e se si restituisce false, l'utente verrà reindirizzato a una pagina con una stringa falsa scritta.

18
rahul

Penso che il modo migliore per farlo sia usare event.preventDefault() perché se nel gestore viene sollevata qualche eccezione, allora l'istruzione return false verrà saltata e il comportamento sarà opposto a quello che si desidera.

Ma se sei sicuro che il codice non innescherà eccezioni, puoi utilizzare qualsiasi metodo tu desideri.

Se vuoi continuare a utilizzare false di ritorno, puoi inserire l'intero codice del gestore in un blocco catch try come di seguito:

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

La mia opinione dalla mia esperienza dice che è sempre meglio usare 

event.preventDefault() 

In pratica per interrompere o impedire l'evento di invio, ogni volta che abbiamo richiesto piuttosto che return falseevent.preventDefault() funziona bene.

1
Dilip0165

La principale differenza tra return false e event.preventDefault() è che il tuo codice sotto return false non verrà eseguito e nel caso event.preventDefault() il codice verrà eseguito dopo questa dichiarazione.

Quando scrivi return false, fai le seguenti cose dietro le quinte.

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

e.preventDefault ();

Interrompe semplicemente l'azione predefinita di un elemento.

Istanza Es .:

impedisce al collegamento ipertestuale di seguire l'URL, impedisce al pulsante di invio di inviare il modulo. Quando hai molti gestori di eventi e vuoi solo impedire che si verifichi un evento di default, e che si verifica da molte volte, Per quello che dobbiamo usare nella parte superiore della funzione (). 

Ragionare:-

Il motivo per usare e.preventDefault(); è che nel nostro codice qualcosa va storto nel codice, quindi permetterà di eseguire il link o il modulo per essere inviato o consentire di eseguire o consentire qualsiasi azione tu debba fare. Il pulsante di collegamento o invio verrà inviato e consentirà comunque un'ulteriore propagazione dell'evento.

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

restituisce False;

Interrompe semplicemente l'esecuzione della funzione ().

"return false;" terminerà l'intera esecuzione del processo.

Ragionare:-

La ragione per usare restituisce falso; è che non si desidera eseguire più la funzione in modalità rigorosa.

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

1
Parth Raval

Fondamentalmente, in questo modo si combinano le cose perché jQuery è un framework che si focalizza principalmente sugli elementi HTML, in pratica si impedisce il default, ma allo stesso tempo si interrompe la propagazione.

Quindi possiamo semplicemente dire che restituire false in jQuery equivale a:

return false è e.preventDefault AND e.stopPropagation

Ma non dimenticare che è tutto nelle funzioni relative a jQuery o DOM, quando lo esegui sull'elemento, in pratica, impedisce che tutto si spenga, incluso il comportamento predefinito e la propagazione dell'evento.

Fondamentalmente prima di iniziare a usare return false;, prima capisci cosa fanno e.preventDefault(); e e.stopPropagation();, quindi se pensi di aver bisogno di entrambi allo stesso tempo, allora semplicemente usalo.

Quindi in pratica questo codice qui sotto:

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

è uguale a questo codice:

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

Dalla mia esperienza event.stopPropagation () è utilizzato principalmente in effetti CSS o opere di animazione, ad esempio quando si ha effetto hover per entrambi gli elementi card e button, quando si passa il mouse sul pulsante, l'effetto hover di entrambe le schede e pulsanti verrà attivato in questo caso , puoi usare event.stopPropagation () per interrompere le azioni di bubbling e event.preventDefault () serve per impedire il comportamento predefinito delle azioni del browser. Ad esempio, hai un modulo ma hai definito solo l'evento click per l'azione di invio, se l'utente invia il modulo premendo enter, il browser attivato dall'evento keypress, non l'evento click qui dovresti usare event.preventDefault () per evitare inappropriati comportamento. Non so cosa diavolo sia tornato falso; mi dispiace.Per ulteriori chiarimenti visita questo link e gioca con la linea # 33 https://www.codecademy.com/courses/introduction-to-javascript/lessons/requests-i/exercises/xhr-get-request-iv

0
Sathish Shajahan