用於觸發 JavaScript 函數的連結

當你使用純 JavaScript 創建應用程序時，有時你會需要在用戶點擊連結時觸發一個函數。

你通常可以通過以下兩種方式來實現。

假設你要執行的函數叫做 handleClick()：

1
2
3

function handleClick() {
  alert('被點擊了');
}

第一種方式是使用以下連結：

1	<a href="#" onclick="handleClick()">點擊這裡</a>

第二種方式是使用以下連結：

1	<a href="javascript:void(0)" onclick="handleClick()">點擊這裡</a>

這兩種方式的語法非常相似，唯一的區別在於 href 屬性的值。

第一種方式是 href="#"，第二種方式是 href="javascript:void(0)"。
你可能也會看到這種語法 href="javascript:;"，它與第二種方式等價。

那麼，這兩種方式的行為有什麼不同呢？

當用戶點擊 href="#" 的連結時，你必須確保從事件處理程序中返回 false，否則瀏覽器會自動滾動到頁面頂部：

function handleClick() {
  alert('被點擊了');
  return false;
}

此外，即使你添加了這個返回語句，但如果 JavaScript 被禁用或由於某些原因無法執行，瀏覽器仍會自動滾動到頁面頂部。這是一件幾乎總是要避免的事情，因此我個人會選擇使用第二種形式 href="javascript:void(0)"。

無論使用哪種方式，如果 JavaScript 被禁用或 JavaScript 中出現錯誤且 JavaScript 執行停止，則不會調用 handleClick() 函數。

為了防止這種情況，你可以在 href 中使用一個真實的 URL 作為後備方案，這樣瀏覽器將使用 GET HTTP 方法將用戶移動到特定頁面，儘管這不總是可能或方便。

但這是一種最佳實踐，而最佳實踐並不總是方便的，但你必須在應用程序設計階段考慮到它們，因為你不能只為理想情況構建應用程序，而忽略一切可能出錯的情況。

如果出了點問題，用戶會責怪你和你的壞連結 🙂

tags: [“JavaScript”, “links”, “best practice”]