实例比较：空链接 # 与 Javascript:void(0); 哪个更好？
作者:admin 时间:2022-5-13 18:9:16 浏览:空链接有很多写法，其中最常见的两种写法是：#和Javascript:void(0);，一般人会按照自己的习惯选择使用哪一个，不过并非每个空链接产生的效果都一样。今天，我通过实例比较，看看空链接 # 与 Javascript:void(0); 哪个更好。
javascript:void(0);
<a href='javascript:void(0);' 是使用<a href='#'时javascript的替代方式，返回 undefined，void(0); 是一个原始值，这迫使浏览器停留在同一页面上，简而言之，void(0);它是一个简短的脚本，默认情况下返回 undefined。关于javascript:void(0)的更详细解释，你可以阅读此文javascript:void()函数方法的解释。
尽管在现代 Web 编程或 Web 设计中不建议使用 javascript 作为链接，因为它往往会导致错误，但如果有人添加书签或链接尝试在新选项卡上打开链接，无论如何都不可避免地要使用它们。使用它是一种提供根本不指向任何地方的 URL 的方法。所以当链接被点击时，它不会被点击，这种情况很好，但是当链接被指向时，URL 会显示在状态字段中。
在<a href='javascript:void(0)'页面中间使用时，用户会尝试点击它，因为它看起来像一个链接，大多数用户习惯于页面中间的链接，用户点击他们不知道的链接可能会导致他们到达什么或最终会导致什么，从而导致打开一个新的空白页面，或者显示javascript错误。
下面是关于javascript:void(0)和#如何工作的示例代码；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p style="width:100%;height:1800px;background:#bbbbbb"></p>
<p>
<a href="#"> #空链接，点击后跳到网页顶部 </a><br><br>
<a href="javascript:void(0);"> void(0) 空链接，点击后停在当前位置 </a></br><br>
</p>
</body>
</html>
点击 # 链接会跳到页面顶部
如上例所见，如果页面很长，超过了一屏，当我们点击 # 空链接时，页面会跳到顶部，没有用户希望这样，但使用空链接 <a hreft= 'javascript:void(0);' 就能很好的避免了这种情况。
如果你要使用<a hreft= '#'>但又不想点击后跳到网页顶部，那么可以为该链接添加一个onclick事件，代码是：
<a href='#' onclick='return false'>#空链接，点击后停在当前位置</a>
此外，还可以为该a标签绑定一个click监听事件，代码这样：
<a href="#" id="a"> #空链接，点击后停在当前位置 </a>
<script>
document.getElementById ("a").addEventListener("click", function (e) {
e.preventDefault();
return false;
}, false);
</script>
javascript:void(0)的返回值
使用javascript:void(0)时，它返回执行脚本的值，并将显示在浏览器中。执行脚本的值来自void(0)这里，函数 void 返回 null 的表达式，类似于没有返回语句的函数；只返回 undefined，因此能够将代码注入<a>标签的 href 属性。用户可以运行代码，而无需浏览器运行代码来替换当前页面。
区别
href=""只会加载当前页面，同时href="#"将当前页面跳到顶部，而href="javascript:void(0)"什么都不做。
用标签的单击事件处理程序返回 false 可实现与javascript:void(0)相同的效果。
<a>还可使用<a id="a-id" href="#">链接</a>，然后将事件处理程序绑定到单击侦听器上，从而防止点击后跳到网页顶部。
例如：
document.getElementById("a-id").onClick = function(){
return false;
};什么时候使用#而不是javascript:void(0)？
当JavaScript被禁用时，仍然允许使用"#"，这样的链接点击后，页面不会重新加载（点击 href="" 的空链接时页面会重新加载）。
当使用锚链接时，<a href= "#">更干净，超链接将诱使访问者点击它们，期望进入新页面或同一网页中的网页顶部。
javascript:{} 与 javascript:void(0)
空链接我们还见有人用javascript:{} ，测试发现，javascript:{} 与 void(0) 一样，都是返回 undefined ，所以这两种写法其实没有区别。
结论
当你希望链接导航到页面顶部时使用<a href="#" >，当你希望页面刷新而不在新选项卡上打开但确保事件侦听器在函数上返回 false 以返回 undefined 的工作时使用Javascript:void(0);。
我想说两个超链接都有自己的特殊情况，在某些情况下，两者都可以以相同的方式执行相同的事情。
不同之处在于javascript:void(0)在页面上加载可能比<a href="#" >超链接花费更长的时间。
参考文章
相关文章
- 站长推荐
