javascript - 没有目标的 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 提供一个实际的 url 来处理优雅的降级。

---

What's the minimum definition of a function that does nothing?

这是一个空操作函数:

var noop = function(){};

...或者由于您使用的是 jQuery，您可以使用 jQuery.noop()^[docs]方法，它也只是一个空函数。

$.noop