使用onclick创建一个可点击的链接，但没有href =＃？

Question

我的页面上有一组可点击的标识符。大约有一百个，比如'cat1'，'cat2'，'dog1'，'dog2'，'dog3'等等。然后我有一个function IDClick(id) {}

我需要在HTML中点击这些标识符，以实现我使用<a>标记onclick

<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();阻止浏览器执行默认操作。

Answer 2

您可以使用CSS强制光标在可点击元素悬停时更改：

.myClickableThingy {
    cursor: pointer;
}

然后，您可以在<span>标记之前切换回<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

在IDClick处理函数中使用return false;。

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

IDClick() {

   ...
   return false;

}