Perché "return false" non funziona?

Perché nel seguente codice return false non funziona?

<script>
  function handler() {
    alert( "..." );
    return false;
  }
</script>

<a href="https://w3.org" onclick="handler()">il browser andrà su w3.org</a>

Il browser navigherà verso all’URL al click, ma non è ciò che vogliamo.

Come si può sistemare?

Quando il browser legge un attributo on* come onclick, crea il gestore dal suo contenuto.

Nel caso di onclick="handler()" la funzione sarà:

          function(event) {
  handler() // il contenuto del click
}
        

Possiamo osservare che il valore restituito da handler() non viene usato e non influenza il risultato.

Il fix è semplice:

<script>
  function handler() {
    alert("...");
    return false;
  }
</script>

<a href="https://w3.org" onclick="return handler()">w3.org</a>

Possiamo anche usare event.preventDefault(), come in questo esempio:

<script>
  function handler(event) {
    alert("...");
    event.preventDefault();
  }
</script>

<a href="https://w3.org" onclick="handler(event)">w3.org</a>