JavaScript中href="javascript:void(0)"的使用与替代方案

链接点击导致页面跳转的问题

在进行网页开发时，若需创建一个点击后不执行默认跳转操作的链接，或希望点击后触发其他自定义逻辑，通常会将链接的href属性设置为"#"。然而，这种做法存在一个明显的缺陷：当页面内容超出视口产生滚动条时，点击该链接会导致页面自动滚动回顶部，从而严重影响用户的浏览体验。

针对上述问题，目前主要有以下几种解决方案：

不执行操作的实现方案

1. 点击链接后不执行任何操作

 
<a href="javascript:void(0);" >test</a>
<a href="javascript:;" >test</a>
<a href="####" >test</a> //常见写法为使用2到4个#号，也有使用"#all"等其他形式

响应自定义点击事件的方案

2. 点击链接后，响应用户自定义的点击事件

 
<a href="javascript:void(0)" onclick="doSomething()">test</a>
<a href="#" onclick="doSomething();return false;">此方法可解决大部分问题，包括浏览器兼容性问题</a> //或者直接使用href=""
<a href="#" onclick="alert();event.returnValue=false;">test</a>

注意事项与原理说明

补充说明：

1. 对于javascript:void(0)这种伪协议，建议尽量少用。参考部分Web标准相关书籍可知其原因（此处暂作记录，具体原理需进一步查阅）

2. 在链接（href）中直接使用javascript:void(0)在IE浏览器中可能会引发一些异常，例如导致GIF动画停止播放等。因此，最稳妥的做法是使用“####”。为了防止点击链接后页面跳转至顶部，只需在onclick事件中返回false即可。

3. 如果仅仅是希望鼠标悬停时显示手型光标，可以使用以下代码：

 
<span style="cursor:pointer" onclick="foo()">Click Me!</span>

void是JavaScript中的一个操作符，其含义是：仅执行表达式，但不返回任何值。

void操作符的用法格式如下：

 
javascript:void (expression)
javascript:void expression

为了保持良好的代码风格，建议使用第二种带有括号的写法。

我们可以利用void操作符来指定超级链接，例如javascript:void(document.form.submit())。该表达式会被计算，但不会在当前文档中加载任何内容。void(0)的计算结果为0，但在JavaScript中没有任何实际效果，因此<a href="javascript:void(0)">的效果与<a href="javascript:void(1)">的效果是相同的。

关键在于理解void是JavaScript自身的操作符，它表示只执行表达式，而没有返回值。

另外，页面自动跳回顶端是因为"#"默认的锚点位置是top，所以会出现这种情况。