用於觸發 JavaScript 函數的連結
當你使用純 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 方法將用戶移動到特定頁面,儘管這不總是可能或方便。 但這是一種最佳實踐,而最佳實踐並不總是方便的,但你必須在應用程序設計階段考慮到它們,因為你不能只為理想情況構建應用程序,而忽略一切可能出錯的情況。 如果出了點問題,用戶會責怪你和你的壞連結 🙂