當你使用純 JavaScript 創建應用程序時,有時你會需要在用戶點擊連結時觸發一個函數。
你通常可以通過以下兩種方式來實現。
假設你要執行的函數叫做 handleClick()
:
function handleClick() {
alert('被點擊了');
}
第一種方式是使用以下連結:
<a href="#" onclick="handleClick()">點擊這裡</a>
第二種方式是使用以下連結:
<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 方法將用戶移動到特定頁面,儘管這不總是可能或方便。
但這是一種最佳實踐,而最佳實踐並不總是方便的,但你必須在應用程序設計階段考慮到它們,因為你不能只為理想情況構建應用程序,而忽略一切可能出錯的情況。
如果出了點問題,用戶會責怪你和你的壞連結 🙂