JavaScript中void(0)的作用及与href=#的区别解析

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中不能显示)

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

以上内容是小编给大家介绍的javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别，希望对大家有所帮助。