なぜ "return false" が動作しないのでしょう?

なぜ下のコードで return false がまったく動かないのでしょうか？

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

<a href="http://w3.org" onclick="handler()">the browser will go to w3.org</a>

ブラウザはクリックでそのURLを辿りますが、それをしたくありません。

どのように修正しますか？

ブラウザが onclick のような on* 属性を読み込むとき、そのコンテンツからハンドラを生成します。

onclick="handler()" の場合、関数はこうなります:

          function(event) {
  handler() // onclick のコンテンツ
}
        

今、handler() により返却された値は使われておらず、結果には影響しないことが分かります。

修正例です:

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

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

もしくは、このように event.preventDefault() を使うこともできます:

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

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