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

来源：互联网发布：别墅网络编辑：程序博客网时间：2024/05/21 10:30

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

0 0