Sandbox::https://da.javascript.info/task/why-return-false-fails

Se på koden nedenfor. Hvorfor virker return false ikke?

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

<a href="https://w3.org" onclick="handler()">browseren vil gå til w3.org</a>

Browseren følger URL’en ved klik, men det er ikke det, vi vil have.

Hvordan løser man det?

Når en browser læser on*-attributten som onclick, opretter den en håndtering ud fra dens indhold.

For onclick="handler()" vil funktionen være:

          function(event) {
  handler() // indholdet af onclick
}
        

Nu kan vi se, at værdien returneret af handler() ikke bruges og ikke påvirker resultatet.

Løsningen er enkel:

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

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

Vi kan også bruge event.preventDefault(), som dette:

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

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

Hvorfor virker "return false" ikke?