使用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会改变。这不是我想要的。

如何获得混合行为？

我也不需要下划线。

- exebook

---

@FelixKling：这样还是更清晰的。我并不是在暗示那是错误。 - Robbie Wxyz

这只是一个例子，实际代码看起来像这样 <a href=# onclick=IDClick("'+animals[0]+animal+'")>'。 - exebook

@SuperScript：听起来你经历了不少。 - Felix Kling

"我也不需要下划线。" 你可以使用CSS更改链接的样式。 - Felix Kling

但是，如果您不想链接到其他资源，可以使用“按钮”代替。 - Felix Kling

Answer 1

你需要阻止浏览器执行它的默认操作。

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

当您单击链接时，默认操作是转到该地址。 event.preventDefault();可以防止浏览器执行默认操作。

这对于辅助功能来说是一个显着更好的解决方案。引用@aij上面的评论："使用CSS使它看起来还不错，但仍然无法从键盘访问（即，Tab键永远不会聚焦链接）"。

- Robbie Wxyz

---

我认为这个答案比批准的答案更好，因为你不需要操纵CSS。 - Rami Loiferman

我会把 preventDefault 的调用放在点击处理函数中，但是除此之外，这比被接受的答案更好。 - Scott Schupbach

这比被接受的答案更好，因为浏览器会在某个地方显示URL，比如在左下角，这是许多人习惯的。 - aderchox

这个方法有效。谢谢。我只是在想，2023年是否有更好的方法，而不是在每个onclick事件后面添加"event.preventDefault();"❓ - undefined

Answer 2

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

.myClickableThingy {
    cursor: pointer;
}

然后你可以切换回之前使用的或其他元素，而不是使用标签。

- beejay

---

切换回之前使用的元素类型，这句话是什么意思？ - exebook

抱歉，我的表述不太清楚。我是指使用div或span代替anchor元素。 - beejay

我尝试过使用div，但它们会跨越整个页面，而使它们自适应大小似乎是一项过于复杂的任务。 - exebook

跨度应该可以解决这个问题。或者采用其他建议的中止默认行为的解决方案。你有几个选择。 - beejay

使用CSS可以让页面看起来还行，但是仍然无法通过键盘访问（例如，按Tab键永远无法聚焦到链接）。 - aij

Answer 3

给你的锚点元素添加一个类并对其进行样式设置，以实现你需要的效果：

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

还有你的CSS：

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

- user1047100

---

这将无法让你切换至该元素/使其获得焦点。 - Robbie Wxyz

@SuperScript 这是原始问题中的一个要求吗？ - user1047100

不，只是一个无障碍性问题。它会工作，只是不是最佳实践。 - Robbie Wxyz

@SuperScript 是的，但我认为他首先不需要锚点。 - user1047100

Answer 4

在IDClick处理函数中使用return false;。 <a href=# onclick=IDClick(id)>id</a>

IDClick() {

   ...
   return false;

}

- Carol Skelly

Answer 5

最近我在大多数情况下使用可点击的跨度。

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

- exebook

Answer 6

如果你设置 href='javascript:IDClick(id)'，那么它将按预期工作，并显示所需的光标行为。

- Mike