event.preventDefault () vs. return false (no jQuery)

Mi chiedevo se event.preventDefault() e return false fossero uguali.

Ho fatto alcuni test , e sembra che

  • Se il gestore eventi viene aggiunto utilizzando il modello precedente, ad esempio

     elem.onclick = function(){ return false; }; 

    Quindi, return false previene l’azione predefinita, come event.preventDefault() .

  • Se il gestore eventi viene aggiunto utilizzando addEventListener , ad esempio

     elem.addEventListener( 'click', function(e){ return false; }, false ); 

    Quindi, return false non impedisce l’azione predefinita.

Tutti i browser si comportano in questo modo?

Ci sono più differenze tra event.preventDefault() e return false ?

Dove posso trovare della documentazione (non potrei in MDN) sul comportamento return false come event.preventDefault() in alcuni casi?


La mia domanda riguarda solo javascript, non jQuery, quindi non contrassegnarlo come duplicato di event.preventDefault () o return false , anche se entrambe le domande hanno quasi lo stesso titolo.

Specifica degli eventi del modello a oggetti del documento W3C in 1.3.1. Le interfacce di registrazione degli eventi affermano che handleEvent in EventListener non ha valore restituito:

handleEvent Questo metodo viene chiamato ogni volta che si verifica un evento del tipo per cui è stata registrata l’interfaccia EventListener. […] Nessun valore di ritorno

sotto 1.2.4. Event Cancelation il documento afferma anche che

L’annullamento si ottiene chiamando il metodo preventDefault dell’Evento. Se uno o più EventListeners chiamano preventDefault durante qualsiasi fase del stream di eventi, l’azione predefinita verrà annullata.

che dovrebbe scoraggiare l’utente dall’utilizzare qualsiasi effetto che la restituzione di true / false possa avere in qualsiasi browser e utilizzare event.preventDefault() .

Aggiornare

La specifica HTML5 in realtà specifica come trattare un valore di ritorno diverso. La sezione 6.1.5.1 delle specifiche HTML afferma che

Se il valore restituito è un valore falso booleano WebIDL, quindi annullare l’evento.

per tutto tranne l’evento “mouseover”.

Conclusione

Consiglierei comunque di utilizzare event.preventDefault() nella maggior parte dei progetti poiché sarete compatibili con le vecchie specifiche e quindi con i vecchi browser. Solo se hai solo bisogno di supportare i browser all’avanguardia, restituire false per annullare va bene.

Differenza tra preventDefault, stopPropogation, return false

Tabella che mostra la differenza

Azione predefinita: azione lato server quando si verifica un evento di controllo.

Supponiamo di avere il controllo div e al suo interno abbiamo un pulsante. Quindi div è il controllo genitore del pulsante. Abbiamo un clic del lato client e un evento di clic sul lato server del pulsante. Inoltre abbiamo l’evento click side del client del div.

Nell’evento click del pulsante sul lato client, possiamo controllare le azioni del controllo parent e del codice lato server utilizzando i tre seguenti modi:

  • return false – Questo consente solo l’evento lato client del controllo. L’evento lato server e l’evento lato client del controllo genitore non viene triggersto.

  • preventDefault() : consente l’evento di controllo lato client e il relativo controllo parent. Evento lato server ie. L’azione predefinita del controllo non viene triggersta.

  • stopPropogation() : consente l’aspetto lato client e lato server del controllo. L’evento lato client del controllo non è consentito.

return false è solo per IE, event.preventDefault() è supportato da chrome, ff … browser moderni