event.preventDefault () vs. return false

Quando desidero 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 per fermare la propagazione degli eventi?

Per me, return false;è più semplice, più breve e probabilmente meno soggetto a errori rispetto all'esecuzione di un metodo. Con il metodo, devi ricordare del corretto involucro, parentesi, ecc.

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

return falseda all'interno di un gestore di eventi jQuery è effettivamente la stessa chiamando sia e.preventDefaulte e.stopPropagationin passato oggetto jQuery.Event.

e.preventDefault()impedirà che si verifichi l'evento predefinito, e.stopPropagation()eviterà il gorgogliamento dell'evento e return falsefarà entrambe le cose. Si noti che questo comportamento differisce dai normali gestori di eventi (non jQuery), in cui, in particolare, return falsenon si impedisce all'evento di formarsi bolle.

Fonte: John Resig

Qualche vantaggio nell'uso di event.preventDefault () rispetto a "return false" per annullare un clic href?

Dalla mia esperienza, c'è almeno un chiaro vantaggio quando si utilizza event.preventDefault () rispetto all'utilizzo di return false. Supponiamo che tu stia acquisendo l'evento click su un tag anchor, altrimenti sarebbe un grosso problema se l'utente dovesse spostarsi dalla pagina corrente. Se il gestore di clic utilizza return false per impedire la navigazione nel browser, si apre la possibilità che l'interprete non raggiunga l'istruzione return e che il browser proceda ad eseguire il comportamento predefinito del tag anchor.

$('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 puoi aggiungerlo come prima riga nel gestore, garantendo così che il comportamento predefinito dell'ancora non si attiverà, indipendentemente dal fatto che non venga raggiunta l'ultima riga della funzione (es. Errore di runtime ).

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

  // custom handling here

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

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

jQuery e la citazione precedentemente collegata di John Resig (nel messaggio di Karim79 ) sembrano essere la fonte di incomprensioni su come funzionano i gestori di eventi in generale.

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

La documentazione di MDN spiega come funziona return falseun gestore di eventi

Quello che succede in jQuery non è lo stesso di quello che succede con i gestori di eventi. I listener di eventi DOM e gli eventi "allegati" di MSIE sono una questione completamente diversa.

Per ulteriori informazioni, consultare attachEvent su MSDN e la documentazione W3C DOM 2 Events .

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

Alimentare il tuo Coding ha un grande articolo su return false;vs event.preventDefault()vs event.stopPropagation()vsevent.stopImmediatePropagation() .

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

1. event.preventDefault();
2. event.stopPropagation();
3. Interrompe l'esecuzione della richiamata e ritorna immediatamente quando viene chiamato.

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

Puoi appendere molte funzioni onClicksull'evento per un elemento. Come puoi essere sicuro che falsequello sarà l'ultimo a sparare? preventDefaultd'altra parte impedirà sicuramente solo il comportamento predefinito dell'elemento.

penso

event.preventDefault()

è il modo specificato da w3c per annullare gli eventi.

Puoi leggere questo nelle specifiche del W3C sull'annullamento degli eventi .

Inoltre, non è possibile utilizzare return false in ogni situazione. Quando si fornisce una funzione JavaScript nell'attributo href e se si restituisce false, l'utente verrà reindirizzato a una pagina con stringa falsa scritta.

Penso che il modo migliore per farlo sia usare event.preventDefault()perché se nel gestore viene sollevata un'eccezione, l' falseistruzione return verrà saltata e il comportamento sarà opposto a quello desiderato.

Ma se sei sicuro che il codice non attiverà alcuna eccezione, puoi scegliere il metodo che desideri.

Se vuoi ancora procedere con il ritorno false, puoi inserire l'intero codice del gestore in un blocco catch di prova come di seguito:

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

La mia opinione sulla mia esperienza dicendo che è sempre meglio usare

event.preventDefault() 

Praticamente per interrompere o impedire l'invio di eventi, ogni volta che è necessario, anziché return false event.preventDefault()funzionare correttamente.

La differenza principale tra return falsee event.preventDefault()è che il codice riportato di seguito return falsenon verrà eseguito e nel event.preventDefault()caso in cui il codice verrà eseguito dopo questa affermazione.

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

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

e.preventDefault ();

Arresta semplicemente l'azione predefinita di un elemento.

Istanza Ex.:-

impedisce al collegamento ipertestuale di seguire l'URL, impedisce al pulsante di invio di inviare il modulo. Quando si hanno molti gestori di eventi e si desidera solo impedire che si verifichino e si verifichino eventi predefiniti da più volte, per questo è necessario utilizzarli nella parte superiore della funzione ().

Motivo:-

Il motivo da utilizzare e.preventDefault();è che nel nostro codice qualcosa non va nel codice, quindi consentirà di eseguire il collegamento o il modulo per essere inviato o consentire di eseguire o consentire qualsiasi azione sia necessaria. & il pulsante link o submit 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>

restituire False;

Arresta semplicemente l'esecuzione della funzione ().

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

Motivo:-

Il motivo per utilizzare return false; è che non si desidera più eseguire la funzione in modalità rigorosamente.

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

Fondamentalmente, in questo modo si combinano le cose perché jQuery è un framework che si concentra principalmente su elementi HTML, impedendo fondamentalmente l'impostazione predefinita, ma allo stesso tempo, si interrompe la propagazione per fare bolle.

Quindi possiamo semplicemente dire, restituire false in jQueryequivale a:

return false è e.preventDefault AND e.stopPropagation

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

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

Quindi sostanzialmente questo codice qui sotto:

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

è uguale a questo codice:

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

Dalla mia esperienza event.stopPropagation () viene utilizzato principalmente in effetti CSS o lavori di animazione, ad esempio quando si ha un effetto hover sia per la scheda che per l'elemento del pulsante, quando si passa con il mouse sia l'effetto della carta che quello del pulsante verranno attivati ​​in questo caso , è possibile utilizzare event.stopPropagation () per interrompere le azioni di bubbling e event.preventDefault () serve a prevenire il comportamento predefinito delle azioni del browser. Ad esempio, hai un modulo ma hai definito l'evento click solo per l'azione di invio, se l'utente invia il modulo premendo invio, il browser attivato dall'evento keypress, non il tuo evento click qui dovresti usare event.preventDefault () per evitare inappropriati comportamento. Non so che diavolo sia il ritorno falso; scusa.Per maggiori chiarimenti visita questo link e gioca con la linea # 33https://www.codecademy.com/courses/introduction-to-javascript/lessons/requests-i/exercises/xhr-get-request-iv