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来设置它的样式.

此外,您可以提供一个实际的URL href来处理优雅的降级.

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

这是一个无操作功能:

var noop = function(){};

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

$.noop