如何避免 javascript 錨鏈接中的 href=“#”

Question

除了使用href="#"之外，還有更好的方法來定義執行 javascript 的錨鏈接嗎？ 我不喜歡使用此 href 的主要原因是它使瀏覽器歷史記錄無效。 后退按鈕只是從 URL 中刪除“#”。 如果您使用任何類型的Go 反向鏈接，除非他們單擊兩次，否則它將不起作用。

如果我的 Javascript 是內聯的，我可以使用href="javascript:func()" ，但是當從外部腳本文件附加偵聽器時，這將不起作用。

所以我只是在尋找一個更干凈的方向來指向我的空錨。

Answer 1

如果您“必須”為您的操作使用<a>標簽，在這種情況下，我更喜歡在事件監聽器中添加 preventDefault。 這可以防止“#”被添加到 URL。

 window.onload = function() { document.getElementById("noHash").addEventListener("click", function(e) { e.preventDefault(); console.log("Hi There;"); }); }

 <a href="#" id="noHash">Say Hi</a>

Answer 2

我發布了一個替代答案，以便其他偶然發現此問題的人看到這是一個選項。 當我詢問它時，我沒有意識到您可以使用代碼href="javascript:void(0)" 。 據我所知，這沒有任何負面影響，您以后仍然可以將點擊偵聽器附加到它。

此外，新的 HTML 規范顯然指出錨標簽甚至不需要href屬性，並且在我嘗試過的任何瀏覽器中刪除href屬性似乎都沒有任何副作用（Chrome、Firefox、Opera、Edge） . 盡管如此，我還是堅持使用 void 選項。

最后，我在某處讀到另一個選項是使用href="#!" . 我假設只要您沒有 id ，這將無濟於事! 在你的頁面上，但我沒有測試過這個。 編輯：對此進行了測試-它與單獨使用href="#"具有相同的問題。