javascript:void(0) 与 # 的区别及最佳实践

javascript:void(0) 核心原理

javascript:void(0) 的核心在于 void 关键字。在 JavaScript 中，void 是一个重要的操作符，其作用是计算表达式但不返回任何值。

使用注意事项与兼容性

注意事项：

• 1. 对于 javascript:void(0) 这种伪协议写法，建议谨慎使用。参考 Web 标准相关书籍可知，过度依赖此类写法可能不符合规范（此处引用原话，仅作记录参考）。
• 2. 在链接（href）中直接使用 javascript:void(0) 可能在 IE 浏览器中引发问题，例如导致 GIF 动画停止播放。因此，更安全的替代方案是使用“####”。若要防止点击链接后页面跳转至顶部，可在 onclick 事件中返回 false。
• 3. 如果仅希望鼠标悬停时显示手型光标，可采用其他样式方案。

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

推荐写法与最佳实践

推荐写法：javascript:;

javascript:void(0) 与 # 的区别

为什么要使用 href="javascript:void(0);"

href="javascript:void(0);" 的含义是使超链接执行一个 JavaScript 函数，而非跳转到具体地址。其中 void(0) 表示执行一个空方法，即不执行任何实际 JS 函数逻辑。

javascript: 是一种伪协议，表示 URL 的内容将通过 JavaScript 执行。

void(0) 表示不进行任何操作，从而防止链接跳转到其他页面。这种做法通常是为了保留链接的视觉样式，同时阻止链接执行实际跳转操作。

<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="window.open()"> 点击链接后，页面保持不动，仅打开新链接。

<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="javascript:return false;"> 作用相同，但不同浏览器间可能存在差异。

href="#" 的区别（以谷歌浏览器为例）

<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" >点击</a> 点击链接后不会回到网页顶部。

<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >点击</a> 点击后会回到网页顶部，并在地址栏末尾添加 # 符号。

"#" 实际上包含了位置信息，例如默认的锚点是 #top，即网页的上端。

而 javascript:void(0) 仅仅表示一个死链接。这就是为什么有时页面很长，浏览链接明明是 # 却会跳动到页首的原因。

javascript:void(0) 则不会出现上述情况，因此在调用脚本时最好使用 void(0)。

常见用法与错误示例

使用 javascript 的方法（以下用法可能会报错）

<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="javascript:方法;return false;">文字</a>

<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="javascript:方法;return false;">文字</a>

补充：<a href="javascript:fn();" rel="external nofollow" 这样点击 a 标签就可以执行 fn() 函数了。

若有不足请多多指教！希望给您带来帮助！

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对本站的支持。如果你想了解更多相关内容请查看下面相关链接