href='#' 与 javascript:void(0) 的区别及防跳转最佳实践

理解 void 操作符

void 是 JavaScript 中的一个特殊操作符，其核心功能是计算一个表达式但不返回任何值（即始终返回 undefined）。当将其用于超链接的 href 属性时，浏览器会执行对应的脚本，但因为结果为空，所以不会引起页面的重新加载或位置移动。

常见用法格式

1. javascript:void (expression)：推荐写法，括号明确表达了运算意图。
2. javascript:void expression：省略括号的简写形式，虽可行但可读性较差。

在使用超级链接时，这种写法可以确保点击链接后仅执行逻辑，而不在当前文档中装入新内容。

为什么选择 void(0) 而非 #

在许多示例中，开发者会使用以下几种方式阻止链接跳转：

• <a href="####"></a>
• <a href="javascript:void(0)"></a>
• <a href="javascript:void(null)"></a>
• <a href="#" onclick="return false"></a>

# 锚点定位的副作用

符号 # 在 HTML 中代表锚点，默认指向页首（#top）。如果在点击链接后只执行了部分 JS 代码而未完全阻止默认行为，或者在长页面中点击 href="#"，滚动条会自动跳至页面顶部。这会对用户体验造成明显的视觉干扰。

void(0) 的优势

javascript:void(0) 仅仅表示一个“死链接”。它告诉浏览器“这里有一个地址，但去那里什么也不会发生”，因此不会修改 URL 哈希值，也不会导致页面滚动。这使得它成为调用脚本时的安全选择。

实际应用场景分析

1. 确认删除操作

在处理数据删除等业务逻辑时，通常希望先弹出确认框，再由用户决定是否执行跳转。

<!-- 使用 void(0) 阻断默认跳转 -->
<a href="javascript:void(0)" onclick="deleteItem('123')">删除</a>

<script>
function deleteItem(id){
    if(confirm("确定要删除该数据吗？")) {
        // 在此处执行 AJAX 请求或真正的页面跳转
        location.href="/delete.jsp?id=" + id;
    }
}
</script>

如果将 href 改为 javascript:deleteItem('123')，由于函数体内最后执行了 location.href 赋值，这会直接覆盖并导致页面立即跳转，从而跳过或删除掉后续的逻辑判断流程。使用 void(0) 配合独立的 onclick 事件可以更清晰地分离视图交互与业务逻辑。

2. 打开新窗口

动态打开新标签页时，同样建议避免默认的 # 链接行为：

<script>
function openNewWindow(url) {
    window.open(url, '_blank');
}
</script>

<a href="javascript:void(0)" onclick="openNewWindow('https://example.com')">访问网站</a>

现代前端开发的更优替代方案

尽管 javascript:void(0) 广泛被使用，但在现代开发中需要注意以下潜在问题：

• 可访问性与语义化： 从语义上讲，<a> 标签应用于导航。如果只是为了触发动作，使用 <button> 往往更合适。
• 动画表现： 有反馈指出在旧版 IE 浏览器中使用 void(0) 可能会引发 GIF 动画停止播放的问题。
• 标准做法： 目前最推荐的无跳转交互方式是保留 href="#" 或 href="javascript:void(0)"，但必须配合 return false; 来彻底取消默认行为。

例如：

<a href="#" onclick="doSomething(); return false;">点击我</a>

这样既保证了链接的焦点管理正常，又防止了锚点带来的页面跳动。

总结

javascript:void(0) 利用运算符特性生成空返回值，有效避免了页面的重定向或刷新。它与 # 的主要区别在于是否包含位置信息从而导致锚点跳转。对于需要通过 DOM 元素触发自定义脚本且不希望影响页面状态的场景，这是一个经典且有效的解决方案。

以上就是javascript:void(0)是什么意思及href=#与href=javascript:void(0)的区别的详细内容，更多关于javascript:void(0)的资料请关注本站其它相关文章！