javascript:void(0)是个啥？啥意思是啊
<li id="infoTitle" class="mr-active"> <a href="javascript:void(0);" onclick="goToInfo();">宝贝详情</a> </li>
javascript:void(0) 详细讲解
一、含义
javascript:void(0) 是一个伪协议，它告诉浏览器执行一段 JavaScript 代码，而 void(0) 表示执行后不返回任何值，因此页面不会跳转或刷新。
二、词源
| 部分 | 含义 |
|---|---|
javascript: | 伪协议，表示后面跟的是 JavaScript 代码 |
void | JavaScript 运算符，意思为"求值但不返回任何值" |
(0) | 参数，void 会计算括号内的表达式（这里是 0），然后返回 undefined |
三、在代码中的作用
html
<a href="javascript:void(0);" onclick="goToInfo();">宝贝详情</a>
这段代码要解决什么问题？
<a> 标签天生是超链接，默认行为是：
点击后跳转到
href指定的地址如果没有
href，鼠标会变成普通箭头（不像可点击的手形）
href="javascript:void(0)" 的作用
| 效果 | 说明 |
|---|---|
| ✅ 鼠标变成手形 | 让用户知道这是可点击的 |
| ✅ 不跳转页面 | 点击后停留在当前页 |
| ✅ 不刷新页面 | 不会重新加载 |
| ✅ 不产生历史记录 | 不会在浏览器历史中添加条目 |
✅ 保留 # 锚点行为 | 不会像 href="#" 那样滚动到顶部 |
四、为什么不用 href="#"？
| 写法 | 问题 |
|---|---|
href="#" | 点击后浏览器会滚动到页面顶部 |
href="javascript:void(0)" | ✅ 无副作用 |
没有 href 属性 | 鼠标不会变成手形，用户体验差 |
五、void 运算符详解
语法
javascript
void expression
作用
计算表达式，但始终返回 undefined
示例
javascript
void 0; // 返回 undefinedvoid (0); // 返回 undefinedvoid (1+1); // 计算 2，但返回 undefinedvoid (true); // 返回 undefined
六、javascript:void(0) 的现代替代方案
在现代开发中，推荐使用更优雅的方式：
方案1：使用 button 元素
html
<button onclick="goToInfo();">宝贝详情</button>
css
button {
background: none;
border: none;
cursor: pointer;}方案2：使用 href="#" 并阻止默认行为
html
<a href="#" onclick="goToInfo(); return false;">宝贝详情</a>
方案3：使用 JavaScript 绑定事件
html
<a id="infoLink">宝贝详情</a>
javascript
document.getElementById('infoLink').onclick = function(e) {
e.preventDefault();
goToInfo();};七、总结
| 问题 | 答案 |
|---|---|
javascript:void(0) 是什么？ | 一个伪协议，告诉浏览器执行空操作，不跳转 |
| 为什么用它？ | 让 <a> 标签可点击但又不跳转页面 |
void(0) 什么意思？ | 计算 0，然后返回 undefined（什么都不做） |
| 有更好的写法吗？ | 用 <button> 或 href="#" + return false |
一句话总结：javascript:void(0) 是一种老式的写法，让链接既不跳转也不刷新，只执行 onclick 里的 JavaScript 函数。现代开发中更推荐使用 <button> 元素或合理的事件绑定方式