Domanda 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 alcune ragioni per cui dovrei evitare di farlo in questo modo e usarlo preventDefault anziché? Qual è il modo migliore?


2646
2017-08-31 11:58


origine


risposte:


return false a partire dal all'interno di un gestore di eventi jQuery è effettivamente uguale a chiamare entrambi e.preventDefault e e.stopPropagation sul passato oggetto jQuery.Event.

e.preventDefault() impedirà che si verifichi l'evento predefinito, e.stopPropagation() impedirà all'evento di ribollire e return false farà entrambi. Si noti che questo comportamento è diverso da normale (non jQuery) gestori di eventi, in cui, in particolare, return false fa non fermare l'evento dal ribollire.

Fonte: John Resig

Qualunque vantaggio nell'usare event.preventDefault () su "return false" per cancellare un clic href?


2595
2017-08-31 12:05



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

392
2018-01-22 22:37



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

jQuery e il citazione precedentemente collegata a partire dal John Resig (in karim79 di  Messaggio) sembra essere la fonte di incomprensione su come i gestori di eventi in generale lavorano.

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.

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

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, vedi attachEvent su MSDN e il W3C DOM 2 Documentazione degli eventi.


89
2018-06-20 21:31



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

Alimenta la tua codifica ha un grande articolo su return false; vs event.preventDefault() vs event.stopPropagation() vs event.stopImmediatePropagation().

NOTA: Il Alimenta la tua codifica il collegamento sopra ha prodotto errori 5xx per un po 'di tempo. Ne ho trovato una copia nel Internet Archive, stampato in PDF e messo in Dropbox: archiviati articolo su return false; vs event.preventDefault() vs event.stopPropagation() vs event.stopImmediatePropagation()  (PDF)


58
2018-04-09 18:32



Quando si usa jQuery, return false sta facendo 3 cose separate quando la chiami:

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

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


51
2018-02-19 15:54



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


37
2017-08-31 12:02



credo

event.preventDefault()

è il modo specificato da w3c di cancellare eventi.

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


17
2017-08-31 12:04



Penso che il modo migliore per farlo sia usare event.preventDefault() perché se viene sollevata qualche eccezione nel gestore, quindi il ritorno false la dichiarazione verrà saltata e il comportamento sarà opposto a quello che desideri.

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

Se vuoi ancora andare con il ritorno false, quindi 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;
});

13
2018-03-09 19:27



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 false event.preventDefault() funziona bene.


0
2017-09-29 11:28