67

Mi chiedevo se event.preventDefault() e return false fossero gli stessi.event.preventDefault() vs. return false (no jQuery)

ho fatto some tests, e sembra che

  • Se si aggiunge il gestore di eventi utilizzando vecchio modello, per esempio

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

    Poi, return false impedisce l'azione di default, come event.preventDefault().

  • Se si aggiunge il gestore di eventi utilizzando addEventListener, ad esempio

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

    Poi, 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 qualche documentazione (non potrei in MDN) su return false comportarsi come event.preventDefault() in alcuni casi?


La mia domanda è solo di circa javascript pianura, non jQuery, quindi per favore non contrassegnare come un duplicato di event.preventDefault() vs. return false, anche se entrambe le domande hanno quasi lo stesso titolo.

+0

duplicati di http://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false Se leggete la domanda noterete che si tratta di un generico problema JS non quella jQuery-specifica . jQuery è stato usato solo per rendere il codice di esempio il più breve/pulito possibile. – RaYell

+9

@RaYell No, perché 'return false' di jQuery si comporta diversamente da quello di JavaScript. Inoltre, l'altra domanda non ha alcuna risposta che spieghi la differenza in JS normale (c'è solo un commento che lo spiega, ma è difficile da trovare). Quindi penso che sia meglio avere due domande diverse. – Oriol

risposta

49

Il W3C Document Object Model Events Specification in 1.3.1. interfacce di registrazione di eventi afferma che handleEvent nel EventListener non ha valore di ritorno:

handleEvent Questo metodo viene chiamato ogni volta che si verifica un evento del tipo per il quale è stata registrata l'interfaccia EventListener. [...] No Return Valore

sotto 1.2.4. Evento Annullamento il documento afferma anche che

Annullamento si ottiene chiamando il metodo preventDefault della manifestazione. Se uno o più EventListeners chiamano preventDefault durante qualsiasi fase del flusso 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().

Aggiornamento

Le specifiche HTML5 specifica realtà come trattare un valore di ritorno diverso. Section 6.1.5.1 of the HTML Spec afferma che

Se il valore di ritorno è un valore booleano valore falso WebIDL, quindi annullare l'evento .

per tutto tranne l'evento "mouseover".

Conclusione

consiglio comunque di utilizzare event.preventDefault() nella maggior parte dei progetti in quanto sarà compatibile con il vecchio spec ei browser così vecchi. Solo se hai solo bisogno di supportare i browser all'avanguardia, restituire false per annullare va bene.

+2

Questo link è stato scritto nel 2000. Le specifiche HTML5: http://www.w3.org/TR/ html5/webappapis.html # event-handler-attributes sembra gestire i valori di ritorno per molti eventi (non mouseover): "Se il valore di ritorno è un valore falso booleano WebIDL, quindi annulla l'evento" –

+0

E da alcuni test rapidi in chrome, entrambi restituiscono false e event.preventDefault() do * not * interrompono la propagazione.Credito principalmente a @Oriol: vedi [stop propagation] (http://jsfiddle.net/c9hxq8t8/) vs. [normal] (http://jsfiddle.net/8bwr2/) –

+0

thx, modificato la risposta –

-11

return false è solo per IE, event.preventDefault() è supportato da Chrome, FF ... moderni browser

+9

Ma su Firefox 'return false' funziona come' event.preventDefault() 'quando il gestore eventi viene aggiunto usando il vecchio modello – Oriol

1

Differenza tra preventDefault, stopPropogation, restituire false

Table Showing Difference

Azione predefinita - Azione lato Server quando rilancio 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.

Al clic del pulsante sul lato client, siamo in grado di controllare le azioni di controllo padre e codice lato server utilizzando tre modi seguenti:

  • return false - Questo permette unico client side event del controllo. L'evento lato server e l'evento lato client del controllo genitore non viene attivato.

  • preventDefault() - Questo consente l'evento lato client del controllo e il relativo controllo genitore. Evento lato server ie. L'azione predefinita del controllo non viene attivata.

  • stopPropogation() - Questo consente l'evento lato client e lato server del controllo. L'evento lato client del controllo non è consentito.

+20

Hai sbagliato , 'return false' non interrompe la propagazione, quindi viene attivato il controllo genitore ([demo] (http://jsfiddle.net/8bwr2/)). Inoltre, non sono sicuro di cosa intendi con "* server side click event *". – Oriol

+5

@Beginners, per favore ignora questa risposta. – pilau

+3

Che cos'è questa assurdità sugli eventi lato server? -1 –