使用 onclick 制作可點擊的鏈接但沒有 href=#？

Question

我的頁面上有一組可點擊的標識符。 大約一百個，比如“cat1”、“cat2”、“dog1”、“dog2”、“dog3”等。然后我有一個function IDClick(id) {}

我需要那些可在 HTML 中單擊的標識符，以實現我在onclick使用<a>標簽

<a onclick=IDClick(id)>id</a>

現在它可以工作了，但是當光標懸停在可點擊元素上時，它不會改變。

所以我嘗試添加href=#

<a href=# onclick=IDClick(id)>id</a>

現在光標正常了，但是當我單擊該項目時，瀏覽器位置欄中的 URL 會發生變化。 這是不希望的。

如何獲得混合行為？

我也不需要下划線。

Answer 1

您需要阻止瀏覽器執行其默認操作。

<a href="#" onclick="IDClick(id);event.preventDefault();">id</a>

當您單擊鏈接時，默認操作是轉到該地址。 event.preventDefault(); 阻止瀏覽器執行默認操作。

對於可訪問性而言，這是一個明顯更好的解決方案。 引用上面@aij 的評論：“使用 CSS 使它看起來不錯，但仍然無法從鍵盤訪問它（即，選項卡永遠不會聚焦鏈接）”。

Answer 2

您可以使用 CSS 強制光標在可點擊元素懸停時改變：

.myClickableThingy {
    cursor: pointer;
}

然后您可以切換回<span> s 或您在<a>標簽之前使用的任何元素。

Answer 3

為您的錨元素提供一個類並對其進行樣式設置以實現您的需要：

<a class='kinda-link' onclick='whatevs()'>Hi I'm a kinda-link</a>

還有你的 css：

a.kinda-link:hover { cursor: pointer; }

Answer 4

最近我在大多數情況下使用可點擊的跨度。

 Some text with some <span onclick="alert('hey there')" style="color: blue; cursor: pointer">part</span> that is clickable.

Answer 5

使用return false; 在 IDClick 處理函數中。

<a href=# onclick=IDClick(id)>id</a>

IDClick() {

   ...
   return false;

}