如何最佳地创建一个带有空href的<a>链接

Question

我想要创建一个链接，并使用JavaScript强制链接锚点，我尝试了以下方法：

<a id="ServerSort" href="#" style="text-decoration:underline">

它运行良好，但在单击链接后，页面将失去当前位置。

我需要该链接具有href，因为我需要在悬停时更改鼠标光标。

有人可以给予建议吗？

- user1404577

---

javascript:void(0) 很好地发挥作用。 - Andrew Barber

在CSS中，您可以删除href，然后只需使用a:hover { cursor: pointer; }来实现鼠标悬停时的指针效果。 - Brian Glaz

如果一个链接不指向任何地方，它就不算是真正的链接……因此我更喜欢使用cursor: pointer;而不是javascript:void(0)，还因为如果禁用了JavaScript，这个链接会失效。 - André Dion

空的 href 的原因可能是想要禁用链接，如果是这样，您可以使用 CSS 中的 style="pointer-events:none;"。或者，参见 https://dev59.com/G3I95IYBdhLWcg3w7CnL#32930539。 - Avatar

Answer 1

你可以使用 javascript:void(0)。

<a id="ServerSort" href="javascript:void(0)">

根据King King的评论，您不需要style="text-decoration:underline"

---

通过使用jQuery的event.preventDefault()可以实现

停止事件的默认动作。

$('#ServerSort').click(function(event){
   event.preventDefault(); //or return false;
});

- Tushar Gupta - curioustushar

---

@KingKing 收到，先生。 - Tushar Gupta - curioustushar

使用 javascript:void(0) 是无效的 -- http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#attr-hyperlink-href - James Sumners

@jsumners，创建有效链接就是无效的，但当然使用 javascript: 前缀不会创建任何有效的链接，它只是看起来像链接，允许你在点击时运行一些脚本，在这种情况下，点击将不会产生任何作用。几乎所有主流浏览器都实现了在锚点上使用 javascript: 前缀的功能，我相信它将继续受到支持。 - King King

@KingKing，关键是它并没有创建一个有效的链接。我会让这个链接为我解释一下--https://dev59.com/_HM_5IYBdhLWcg3wp0wX#1293130 - James Sumners

我也同意它不能创建有效链接，你明白吗？看起来你没有理解我先前的评论。针对 OP 的要求，他显然不想要一个有效的链接（从他的评论“...使用 JavaScript 强制链接锚点...”中可以看出），他希望点击链接时运行一些脚本，因此使用 javascript: 前缀是正确的选择，尽管这可能不是最好的选择，因为我们可以使用另一个元素来模拟链接，而且使用 javascript: 前缀需要内联脚本，这是不推荐的。 - King King

不，我不明白。你不能说“创建一个有效的链接是无效的”，然后在同一句话中说“这是一个无效的链接”。这就像在href属性中使用无效的协议一样没有意义。 - James Sumners

Answer 2

最好的方法是将href设置为#0，像这样：

<a href="#0">blabla</a>

为什么要这样做呢？因为您永远不会在ID为0的页面上拥有任何内容（如果您确实有，则存在问题），并且由于#0不存在，点击事件不会让您回到页面顶部。您无需使用JavaScript来实现此功能，也不应该使用JavaScript。

- Bene

---

嗨Bene，我之前尝试了这个建议，但是不知道为什么在点击后会在现有的URL后面添加“#0”。例如：“www.blabla.com/#0”。你有什么想法吗？ - Nikhil Nanjappa

如果您不阻止该操作，它将像浏览器一样将href添加到url中。我的回答意味着防止滚动返回顶部的行为。您想要做什么？ - Bene

工作正常 :) 抑制了React警告。 - Samrat Saha

崇高且优越于“javascript:void(0)”解决方案，谢谢！ :) - user11857517

Answer 3

 .clickable {
   cursor: pointer;
 }

 <a id="ServerSort" class="clickable">Foo</a>

- James Sumners

---

啊，我正在打一个类似的东西。+1 - 指针可以使用CSS轻松控制，无论元素如何。如果你只需要一个指针，你不需要一个锚点元素。一个带有class="clickable"的span同样有效。 - Daved

除了使用锚点，仍然允许在某些时候添加真正的href属性。 - James Sumners

因此我提到了“如果你只需要一个指针...” :) 如果 href 以后可能会用到，一定要留作锚点。 - Daved

使用 href 也会默认为您提供键盘焦点能力。 - SimplGy

Answer 4

使用Event.preventDefault()

该方法告诉用户代理，如果事件没有被明确处理，则不应像通常情况下那样执行其默认操作。

function clickme(ev) {
  alert('You stay here!')
  ev.preventDefault()
}

<a onclick='clickme(event)' href='https://www.google.com/'>https://www.google.com</a>

事件会像往常一样继续传播，除非它的事件监听器调用 stopPropagation() 或 stopImmediatePropagation() 中的任何一个，这两个方法都会立即终止传播。

---

另外，您可以使用onclick='return false'（内联或在函数中）。 它将阻止默认浏览器行为（更多信息）：

function clickme() {
  alert('You stay here!');
  return false;
}

<a href="https://www.google.com/" onclick='return clickme()'>https://www.google.com/</a>

这种方法可以防止事件传播，但是需要注意更多细节。

- Aray Karjauv

Answer 5

几种选择可供选择：

<a id="ServerSort" href="javascript:">

<a id="ServerSort" href="javascript://">

<a id="ServerSort" href="javascript:void(0)">

以下内容被认为是不良做法，我永远不会推荐在生产环境中使用这样的方法。我通常在开发阶段链接到不存在页面时使用第一种选项。

最好不使用 a 标签，而是在下面的示例中切换到 span 标签：

<span id="ServerSort" onclick="return false">Test Link</span>

只需相应地为元素设置样式：

    <style type="text/css">
    #ServerSort {
        text-decoration:underline;
    }
        #ServerSort:hover {
            color:red;
            cursor:pointer;
        }
</style>

我正在内联js，只是手写一个a标签来展示一种不同的方法，避免了覆盖默认行为的需要。

- justinlabenne