创建带有空href的<a>链接的最佳方法[重复]答案

【问题标题】：Best way to create an <a> link with empty href [duplicate]创建带有空href的<a>链接的最佳方法[重复]
【发布时间】：2014-05-21 08:51:29
【问题描述】：

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

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

它运行良好，但点击<a> 链接后页面将失去其当前位置。

我需要链接有一个href，因为我需要鼠标在浏览它时改变光标？

谁能给点建议？

【问题讨论】：

a javascript:void(0) 很好用。
你可以删除href然后在css中做a:hover{ cursor: pointer; }
如果它没有链接到任何地方，它就不是一个真正的链接......因此，我更喜欢cursor: pointer; 而不是javascript:void(0)，而且如果禁用了JavaScript，链接就会中断。跨度>
href 为空的原因可能是希望禁用链接，如果是这样，您可以将 CSS 与 style="pointer-events:none;" 一起使用，请参阅 stackoverflow.com/a/32930539/1066234

标签： javascript jquery css html

【解决方案1】：

你可以使用javascript:void(0)

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

你不需要style="text-decoration:underline" King King 评论

通过 jQuery，您可以通过 event.preventDefault() 来完成

停止事件的默认动作。

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

【讨论】：

@KingKing 罗杰先生。
使用javascript:void(0)无效 -- whatwg.org/specs/web-apps/current-work/multipage/…
@jsumners 创建有效链接是无效的，但当然使用 javascript: 前缀不会创建任何有效链接，它看起来像一个链接，它允许您运行一些脚本单击时，在这种情况下，单击时它什么也不做。在anchor上使用javascript:前缀的功能几乎被主流浏览器实现，我相信它仍然会被支持。
@KingKing 关键是它没有创建一个有效的链接。我会让这个为我解释——stackoverflow.com/a/1293130
@jsumners 我也同意它不会创建有效链接，明白吗？看起来你没有理解我之前的评论。对于 OP 的要求，他显然不想要一个有效的链接（来自他的评论 **... 使用 javaScript 强制链接锚 ... **），他想要点击链接之类的东西将运行一些脚本，因此使用 javascript: 前缀是正确的选择，尽管它可能不是最好的，因为我们可以使用另一个元素并模仿链接，而使用 javascript: 前缀将需要不推荐的内联脚本。

【解决方案2】：

最好的方法是将 href 设置为 #0，如下所示：

&lt;a href="#0"&gt;blabla&lt;/a&gt;

原因如下：您永远不会在页面上看到任何 ID 为 0 的内容（如果有的话，无论如何都会有问题），并且由于 #0 不存在，因此点击事件不会让您返回页面顶部。您不需要 JavaScript 来执行此操作，也不应使用 JavaScript。

【讨论】：

嘿，Bene，我之前尝试过这个建议，但由于某种原因，这会在点击后将“#0”附加到现有 url。例如“www.blabla.com/#0”。有什么想法吗？
好吧，如果您不阻止该操作，它会将 href 添加到 url，就像浏览器一直做的那样。我的回答是为了防止滚动回到顶部的行为。你想做什么？
工作正常 :) 抑制反应警告。
崇高且优于“javascript:void(0)”解决方案，谢谢！ :)

【解决方案3】：

 .clickable {
   cursor: pointer;
 }

 &lt;a id="ServerSort" class="clickable"&gt;Foo&lt;/a&gt;

【讨论】：

啊，我正在同时输入类似的内容。 +1 - 无论元素如何，都可以使用 CSS 轻松控制指针。如果您只需要一个指针，则不需要锚元素。具有 class="clickable" 的跨度也可以。
除了使用锚点外，仍然允许在某些时候添加真正的 href 属性。
因此我提到“如果你只需要一个指针......” :) 如果以后可能需要 href
默认情况下使用href 也会为您提供键盘焦点

【解决方案4】：

有几个选项：

<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，只是在这里手写一个以显示一种不同的方法，避免需要覆盖默认行为。

【讨论】：

【解决方案5】：

使用Event.preventDefault()

此方法告诉用户代理，如果事件没有得到显式处理，则不应像往常一样采取其默认操作。

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

&lt;a onclick='clickme(event)' href='https://www.google.com/'&gt;https://www.google.com&lt;/a&gt;

事件继续像往常一样传播，除非其中一个事件侦听器调用stopPropagation() 或stopImmediatePropagation()，其中任何一个都会立即终止传播。

或者，您可以使用onclick='return false'（内联或函数中）。它将阻止默认浏览器行为（more info）：

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

&lt;a href="https://www.google.com/" onclick='return clickme()'&gt;https://www.google.com/&lt;/a&gt;

不过，这种方法可以防止事件传播。 More details.

【讨论】：