Qual è l'effetto dell'aggiunta di "return false" a un listener di eventi click?

Molte volte ho visto collegamenti come questi nelle pagine HTML:

<a href='#' onclick='someFunc(3.1415926); return false;'>Click here !</a>

Qual è l'effetto di return falsedentro?

Inoltre, di solito non lo vedo nei pulsanti.

Questo è specificato ovunque? In alcune specifiche in w3.org?

Il valore di ritorno di un gestore eventi determina se deve avvenire anche il comportamento predefinito del browser. Nel caso in cui si fa clic sui collegamenti, ciò seguirà il collegamento, ma la differenza è più evidente nei gestori di invio dei moduli, in cui è possibile annullare l'invio di un modulo se l'utente ha commesso un errore nell'inserimento delle informazioni.

Non credo ci sia una specifica W3C per questo. Tutte le antiche interfacce JavaScript come questa hanno ricevuto il soprannome di "DOM 0" e sono per lo più non specificate. Potresti avere fortuna leggendo la vecchia documentazione di Netscape 2.

Il modo moderno di ottenere questo effetto è chiamare event.preventDefault(), e questo è specificato nella specifica Eventi DOM 2 .

Puoi vedere la differenza con il seguente esempio:

<a href="http://www.google.co.uk/" onclick="return (confirm('Follow this link?'))">Google</a>

Facendo clic su "OK" viene restituito true e viene seguito il collegamento. Fare clic su "Annulla" restituisce false e non segue il collegamento. Se javascript è disabilitato, il collegamento viene seguito normalmente.

Ecco una routine più solida per annullare il comportamento predefinito e il bubbling di eventi in tutti i browser:

// Prevents event bubble up or any usage after this is called.
eventCancel = function (e)
{
    if (!e)
        if (window.event) e = window.event;
    else return;
    if (e.cancelBubble != null) e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();
    if (e.preventDefault) e.preventDefault();
    if (window.event) e.returnValue = false;
    if (e.cancel != null) e.cancel = true;
}

Un esempio di come questo sarebbe usato in un gestore di eventi:

// Handles the click event for each tab
Tabstrip.tabstripLinkElement_click = function (evt, context) 
{
    // Find the tabStrip element (we know it's the parent element of this link)
    var tabstripElement = this.parentNode;
    Tabstrip.showTabByLink(tabstripElement, this);
    return eventCancel(evt);
}

COSA "restituisce false" STA FACENDO REALMENTE ?

return false sta effettivamente facendo tre cose molto separate quando lo chiami:

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

Vedi jquery-events-stop-misusing-return-false per maggiori informazioni.

Per esempio :

facendo clic su questo collegamento, restituire false annulla il comportamento predefinito del browser .

<a href='#' onclick='someFunc(3.1415926); return false;'>Click here !</a>

La risintonizzazione falsa da un evento JavaScript di solito annulla il comportamento "predefinito" - nel caso dei collegamenti, indica al browser di non seguire il collegamento.

Credo che ciò non accada l'evento standard.

Nel tuo esempio il browser non tenterà di andare su #.

Return false interromperà il collegamento ipertestuale seguito dopo l'esecuzione di JavaScript. Questo è utile per javascript discreto che degrada con garbo - per esempio, potresti avere una miniatura che usa javascript per aprire un pop-up dell'immagine a dimensione intera. Quando javascript è disattivato o l'immagine viene cliccata al centro (aperta in una nuova scheda), questo ignora l'evento onClick e normalmente apre l'immagine come un'immagine a dimensione intera.

Se non fosse specificato return false, l'immagine avrebbe sia avviato il pop-up che aperto normalmente l'immagine. Alcune persone invece di utilizzare return false usano javascript come attributo href, ma ciò significa che quando javascript è disabilitato il link non farà nulla.

l'uso di return false in un evento onclick impedisce al browser di elaborare il resto dello stack di esecuzione, che include il seguire il collegamento nell'attributo href.

In altre parole, l'aggiunta di return false impedisce a href di funzionare. Nel tuo esempio, questo è esattamente quello che vuoi.

Nei pulsanti, non è necessario perché onclick è tutto ciò che potrà mai eseguire - non c'è href da elaborare e andare.

Il ritorno false sta dicendo di non eseguire l'azione predefinita, che nel caso di un <a href>è seguire il collegamento. Quando si restituisce false a onclick, l'href verrà ignorato.

Browser hack: http://jszen.blogspot.com/2007/03/return-false-to-prevent-jumping.html

Return false impedirà la navigazione. Altrimenti, la posizione diventerebbe il valore di ritorno di someFunc

Questo return falseimpedisce la navigazione della pagina e lo scorrimento indesiderato di una finestra verso l'alto o il basso.

onclick="return false"

Sono sorpreso che nessuno abbia menzionato onmousedowninvece di onclick. Il

onclick='return false'

non rileva il comportamento predefinito del browser risultante nella selezione del testo (a volte indesiderato) per mousedownma

onmousedown='return false'

lo fa.

In altre parole, quando faccio clic su un pulsante, a volte il suo testo viene accidentalmente selezionato modificando l'aspetto del pulsante, che potrebbe essere indesiderato. Questo è il comportamento predefinito che stiamo cercando di prevenire qui. Tuttavia, l' mousedownevento viene registrato in precedenza click, quindi se si impedisce solo quel comportamento all'interno del clickgestore, ciò non influirà sulla selezione indesiderata derivante dalmousedown dall'evento. Quindi il testo viene ancora selezionato. Tuttavia, impedendo l'impostazione predefinita permousedown evento farà il lavoro.

Vedi anche event.preventDefault () vs. return false

Ho questo link sulla mia pagina HTML:

<a href = "" 
onclick = "setBodyHtml ('new content'); return false; "
> click here </a>

La funzione setBodyHtml () è definita come:

function setBodyHtml (s)
{ document.body.innerHTML = s;
}

Quando faccio clic sul collegamento, il collegamento scompare e il testo visualizzato nel browser diventa "nuovo contenuto".

Ma se rimuovo il "falso" dal mio link, fare clic sul link (apparentemente) non fa nulla. Perché?

È perché se non restituisco falso il comportamento predefinito di fare clic sul collegamento e visualizzare la sua pagina di destinazione si verifica, non viene annullato. MA, qui l'href del collegamento ipertestuale è "", quindi si collega alla stessa pagina corrente. Quindi la pagina viene effettivamente aggiornata e apparentemente non succede nulla.

Sullo sfondo la funzione setBodyHtml () viene ancora eseguita. Assegna il suo argomento a body.innerHTML. Ma poiché la pagina viene immediatamente aggiornata / ricaricata, il contenuto del corpo modificato non rimane visibile per più di qualche millisecondo, quindi non lo vedrò.

Questo esempio mostra perché a volte è UTILE utilizzare "return false".

Voglio assegnare ALCUNI href al link, in modo che sia mostrato come link, come testo sottolineato. Ma non voglio che il clic sul link per ricaricare efficacemente la pagina. Voglio che il navigatore predefinito = il comportamento venga annullato e qualunque effetto collaterale sia causato chiamando la mia funzione affinché diventi attiva. Pertanto devo "restituire false".

L'esempio sopra è qualcosa che potresti provare rapidamente durante lo sviluppo. Per la produzione, è più probabile che tu assegni un gestore di clic in JavaScript e chiami invece preventDefault (). Ma per una rapida prova il "return false" sopra fa il trucco.

Quando si utilizzano i moduli ， è possibile utilizzare "return false" per impedire l'invio.

function checkForm() {
    // return true to submit, return false to prevent submitting
}
<form onsubmit="return checkForm()">
    ...
</form>