href="javascript:void(0);"、href="javascript:;"和href="#"

xiaoxiao2021-02-28  94

href=”javascript:void(0);”

href=”javascript:void(0);”、href=”javascript:void 0;”和href=”javascript:void(1);”表示一个死链接,void是javascript的操作符,意思是:只执行表达式,但没有返回值,void操作符用法格式如下: javascript:void(expression)或javascript:void expression,expression是一个要计算的Javascript 标准的表达式。表达式外侧的圆括号是选的,但是写上去是一个好习惯。(实现版本Navigator 3.0) ,你以使用 void 操作符指定超级链接。表达式会被计算但是不会当前文档处装入任何内容。 1、链接(href)直接使用javascript:void(0)在IE中可能会引起一些问题,比如:造成gif动画停止播放等 2、javascript:void(0)这种伪协议,少写的好,如果你看过一些web标准的书就知道为什么了。(不懂,原话摘的,暂做记录)

href=”javascript:;”

功能和href=”javascript:void(0);”一致,相对于href=”javascript:void(0);”href=”javascript:;”好些,据说某些情况下有浏览器兼容bug。(此点bug我也不知道什么时候能出现,知道的童鞋请指教)。

href=”#”

页面锚点跳转链接,使用2个到多个#,见的大多是”####”(注意##在ie浏览器上等同于#),也有使用”#all”(只要是当前页面没有的)等其他的,为防止点击链接后跳转到页首,onclick事件添加return false即可。

测试代码

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> div { margin-top: 300px; } </style> </head> <body> <div> <a href="javascript:void 0;" onclick="print(this);">1、href="javascript:void 0;"</a> <p> 不跳转,执行打印方法 </p> </div> <div> <a href="javascript:void(0);" onclick="print(this);">2、href="javascript:void(0);"</a> <p> 不跳转,执行打印方法 </p> </div> <div> <a href="javascript:void(1);" onclick="print(this);">3、href="javascript:void(1);"</a> <p> 不跳转,执行打印方法 </p> </div> <div> <a href="javascript:;" name="a4" onclick="print(this);">4、href="javascript:;"</a> <p> 不跳转,执行打印方法 </p> </div> <div> <a href="#" onclick="javascript:print(this);">5、href="#" onclick="javascript:print(this);"</a> <p> 跳转顶部,执行打印方法 </p> </div> <div> <a href="#" onclick="javascript:print(this);return false;">6、href="#" onclick="javascript:print(this);return false;"</a> <p> 不跳转,执行打印方法 </p> </div> <div> <a href="#">7、href="#"</a> <p> 跳转顶部,不执行打印方法 </p> </div> <div> <a href="##">8、href="##"</a> <p> 火狐和谷歌不跳转、ie跳转顶部,不执行打印方法 </p> </div> <div> <a href="##" onclick="javascript:print(this);">9、href="##" onclick="javascript:print(this);"</a> <p> 火狐和谷歌不跳转、ie跳转顶部,执行打印方法 </p> </div> <div> <a href="###">10、href="###"</a> <p> 不跳转,不执行打印方法 </p> </div> <div> <a href="####">11、href="####"</a> <p> 不跳转,不执行打印方法 </p> </div> <div> <a href="#####">12、href="#####"</a> <p> 不跳转,不执行打印方法 </p> </div> <div> <a href="#all">13、href="#all"</a> <p> 不跳转,不执行打印方法 </p> </div> <div> <a href="#fdsfa">14、href="#fdsfa"</a> <p> 不跳转,不执行打印方法 </p> </div> <div> <a href="#a4">15、href="#"</a> <p> 跳转到4、href="javascript:;",不执行打印方法 </p> </div> <div> <a href="#this" onclick="print(this);">16、href="#this"</a> <p> 不跳转(跳转自身),不执行打印方法 </p> </div> <div> <a href="javascript:void(null);" onclick="print(this);">17、href="javascript:void(null);"</a> <p> 不跳转,执行打印方法 </p> </div> </body> <script type="text/javascript" src="jquery-3.0.0.min.js"></script> <script type="text/javascript"> function print(source) { console.log($(source).text()); } </script> </html>

综上所述,推荐使用<a href="javascript:;" onclick="function();"></a>这种方式。 参考:http://www.jb51.net/article/37904.htm

转载请注明原文地址: https://www.6miu.com/read-72381.html

最新回复(0)