HREF链接没有任何目标，不想使用hash或void（0）

Question

我有一个链接，我希望能够单击以触发一段jQuery代码。

目前我有

<a href="#" id="foo">Link</a>

和

$('#foo').click(function(){
  // Do stuff
});

运作良好。但是，我一直讨厌以这种方式使用哈希。页面闪烁，散列被添加到页面URL。

另一种方法是使用

<a href="javascript:void(0);" id="foo">Link</a>

但我也不喜欢在浏览器状态栏中看到这段代码。它看起来很俗气。

---

我更喜欢的是一个解释性的javascript占位符，它什么都不做，比如

<a href="javascript:zoom();" id="foo">Link</a>

实际上有效，但在javascript控制台中抛出一个ReferenceError，因为没有这样的函数。 什么是无效的函数的最小定义？

还有其他选择吗？

我应该跳过链接并使用类似

的内容

<span id="foo" style="cursor:pointer;cursor:hand;">Link</span>

代替吗

Answer 1

使用event.preventDefault()^[docs]方法。

$('#foo').click(function(e){

   e.preventDefault();
  // Do stuff
});

这样可以防止哈希在单击时产生任何影响。或者去除散列，并使用CSS来设置样式。

此外，您可以为href提供实际网址以处理优雅降级。

---

  

什么是无效的函数的最小定义？

这是一个无操作功能：

var noop = function(){};

...或者因为你正在使用jQuery，你可以使用jQuery.noop()^[docs]方法，它也只是一个空函数。

$.noop

Answer 2

理想情况下，该链接应链接到一个页面，该页面为未启用JS的用户复制JavaScript功能。然后preventDefault将阻止实际导航，正如其他答案所示。

如果在这种情况下没有意义，请注意href属性是可选的。你可以完全放弃它。

Answer 3

这是对链接的不恰当使用，您应该使用一个按钮或其他一些元素来指示点击会使某些事情发生但不会导航。

Answer 4

您可以使用preventDefault，例如：

$('#foo').click(function(e){
    // Do stuff
    e.preventDefault();
});