javascript - prevent - js stoppropagation




event.preventDefault() vs. return false (8)

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 utilizzare invece preventDefault ? Qual è il modo migliore?


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

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

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

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


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.


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.


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.


return false da un gestore di eventi jQuery e.preventDefault effettivamente a chiamare sia e.preventDefault che e.stopPropagation sull'oggetto 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?





event-propagation