javascript:void(0)含义及与#链接的区别详解

JavaScript中void操作符的基本概念

在JavaScript语言中，void是一个操作符，其功能是计算指定的表达式，但不会返回任何值。

void操作符的使用格式如下所示：

1. javascript:void (expression)

2. javascript:void expression

其中，expression代表一个需要计算的JavaScript标准表达式。虽然表达式外层的圆括号是可选的，但为了代码清晰，建议保留。

你可以利用void操作符来定义超级链接。此时，表达式会被执行计算，但当前文档不会加载任何新内容，即不会发生页面跳转。

防止超链接跳转的四种写法

示例：点击超链接时不触发跳转

1：<a href="####"></a>

2：<a href="javascript:void(0)"></a>

3：<a href="javascript:void(null)"></a>

4：<a href="#" onclick="return false"></a>

点击链接后，页面通常会滚动到页首，因为#默认的锚点指向#TOP（实际测试发现滚动条会滚到顶端）。而上述四种写法仅表示一个死链接，既不会跳转也不会返回到页面顶部。

void(0)对location.href跳转的影响

示例：为什么location.href不自动跳转？


<a href="javascript:void(0)" onclick="delete('123')">删除</a>
function delete(id){
 if(confirm("确实要删除[为什么location.href不自动跳转？]吗？")) {
  location.href="/delete.jsp?id=" + id;
 }
}

以上代码经过检查均无语法错误，且location.href="/delete.jsp?id=" + id;在其他场景中正常工作，为何在此处失效？

原因在于void(0)改变了执行逻辑，将其修改为：


<a href="javascript:delete('123')">删除</a>function delete(id) {
 if(confirm("确实要删除[为什么location.href不自动跳转？]吗？")) {
  location.href="/delete.jsp?id=" + id;
 }
}

修改后我们发现，页面立即跳转并正常删除了相应数据。这是为什么呢？

因为void是一个操作符，它计算表达式但不返回值，也不改变当前页面的任何内容，因此不会触发正常的页面跳转行为。

void运算符的返回值与适用场景

说明

void运算符对表达式求值，并返回undefined。当希望求表达式的值，但又不希望脚本的剩余部分看见这个结果时，该运算符最有用。

IE兼容性问题与最佳实践

链接（href）直接使用javascript:void(0)在IE中可能会引起一些问题，比如：造成gif动画停止播放等，所以，最安全的办法还是使用“#”。为防止点击链接后跳转到页首，onclick 事件 return false即可。

href=#与javascript:void(0)的核心区别

PS：href=#与href=javascriptvoid(0)的区别

＃"包含了一个位置信息默认的锚点是＃top 也就是网页的上端而javascript:void(0) 仅仅表示一个死链接这就是为什么有的时候页面很长浏览链接明明是＃可是跳动到了页首而javascript:void(0) 则不是如此所以调用脚本的时候最好用void(0) 或者<input onclick> <div onclick>等

打开新窗口的替代方案

打开新窗口链接的几种办法

1.window.open('url')

2.用自定义函数


<script>   
function openWin(tag,obj)   
{    
obj.target="_blank";    
obj.href = "Web/Substation/Substation.aspx?stationno="+tag;    
obj.click();   
}   
</script> 
<a href="javascript:void(0)" onclick="openWin(3,this)">LINK_TEST</a> 
window.location.href=""

-------------------------------------------------------------------------------

如果是个# ，就会出现跳到顶部的情况,个人收藏的几种解决方法：

1：<a href="####"></a> 2：<a href="javascript:void(0)"></a> 3：<a href="javascript:void(null)"></a> 4：<a href="#" onclick="return false"></a> 5：<span style="cursor:hand"></span>(好像在FF中不能显示)