javascript:void(0) 你知道为什么这么写吗？
经常看到 html 页面中的 a 的 href 是这个值： javascript:void(0).
这个可以这么翻译： 它的协议是 javascript协议, 后面的javascript表达式是 void(0).
void 是 javascript 的一个操作符, 后面跟一个表达式. 不论表达式的最终结果是什么, 这个 void 操作符都返回 undefined.
浏览器发现 href 的值是 javascript 的undefined, 那么就不执行任何操作, 也不跳转.
a 的 href 常见的值有:
- href="https://example.com/s.php" //跳到另外一个网站s.php页面 页面刷新
- href="d.jsp" //跳到一个相对路径 d.jsp 页面刷新
- href="#top" //跳到锚点 top 页面不刷新
- href="#" //一般跳到页面顶端 页面不刷新
- href="" // 空值, 相当于当前页面, 页面刷新
继续前面的 javascript:void(0)
既然前面说了, 只要返回的是 undefined, 这个链接就打到不刷新的效果, 为何不用下面这2种方式呢?
- href="undefined" //这个undefined不属于javascript的, 它让浏览器跳转到相对路径为 undefined 的页面
- href="javascript:undefined" // 这个应该是和 javascript:void(0) 效果一样的
但是 undefined 在javascript中, 不是一个保留的关键字, 所以 它可以在非全局的命名空间中被用作变量名. 详情参看 这里
如果你再 html 中直接写 href="javascript:undefined" 那么, undefined 肯定是js中那个全局的 undefined值, 所以效果是和 void(0) 一致的. 只是怕出错而已.
另外 void(0) 和 void 0, void 1, void("hello world") 又有什么区别?
表达式加 (), 只是为了可读性. 既然不论表达式怎么执行, 返回都是 undefined, 其实表达式无所谓, 可以随便写.
一般情况下, 用 href="javascript:void(0)" 的地方, 都是不想执行这个默认的跳转链接, 而是通过 click 事件来决定跳转或提交.
既然用click 事件, 为什么不用 button 呢?