為何「return false」不起作用？ - 現代 JavaScript 教學

為什麼在以下程式碼中，return false 完全不起作用？

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

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

瀏覽器在點擊時會遵循 URL，但我們不希望這樣。

如何修正？

當瀏覽器讀取像 onclick 這樣的 on* 屬性時，它會從其內容建立處理常式。

對於 onclick="handler()" 函式將會是

          function(event) {
  handler() // the content of onclick
}
        

現在我們可以看到 handler() 回傳的值並未被使用，也不會影響結果。

修正方法很簡單

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

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

我們也可以使用 event.preventDefault()，像這樣

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

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