event.preventDefault () vs. return false

Quando voglio impedire l’esecuzione di altri gestori di eventi dopo l’triggerszione 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 utilizzare invece preventDefault ? Qual è il modo migliore?

return false da un gestore di eventi jQuery e.preventDefault effettivamente a chiamare sia e.preventDefault che e.stopPropagation sull’object jQuery.Event passato .

e.preventDefault() impedirà l’evento di default, e.stopPropagation() impedirà l’evento di ribollire e return false farà entrambe le cose. Si noti che questo comportamento è diverso dai normali gestori di eventi (non jQuery), in cui, in particolare, return false non interrompe l’evento.

Fonte: John Resig

Qualunque vantaggio nell’usare event.preventDefault () su “return false” per cancellare un clic href?

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

Questo non è, come tu lo hai intitolato, una domanda “JavaScript”; è una domanda riguardante la progettazione di jQuery.

jQuery e la citazione precedentemente collegata da John Resig (nel messaggio di karim79 ) sembrano 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 informazioni, consultare attachEvent su MSDN e la documentazione degli eventi del DOM 2 del W3C .

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

NOTA: il collegamento Fuel Your Coding ha prodotto errori 5xx per un po ‘di tempo. Ne ho trovato una copia nell’archivio Internet , l’ho stampata in PDF e l’ho inserita in Dropbox: articolo archiviato su return false; vs event.preventDefault() vs event.stopPropagation() vs event.stopImmediatePropagation() (PDF)

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 chiamato.

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

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

credo

event.preventDefault()

è il modo specificato da w3c di cancellare eventi.

Puoi leggere questo nella specifica W3C sulla cancellazione 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.

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

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

Se vuoi continuare con il ritorno false , puoi inserire l’intero codice del gestore in un blocco try try come di seguito:

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

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 viene richiesto piuttosto che return false event.preventDefault() funziona event.preventDefault() .

La differenza principale 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(); 

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

La ragione 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>        Preventsss page from redirect    

Fondamentalmente, in questo modo si combinano le cose perché jQuery è un framework che si concentra 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 si esegue sull’elemento, in pratica, impedisce che tutto si spari, incluso il comportamento predefinito e la propagazione dell’evento.

Fondamentalmente prima di iniziare usa return false; , per prima cosa capisci cos’è e.preventDefault(); e e.stopPropagation(); fallo, quindi se pensi di aver bisogno di entrambi contemporaneamente, 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(); });