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

最新推荐文章于 2023-04-06 23:00:09 发布

萧逸才

最新推荐文章于 2023-04-06 23:00:09 发布

阅读量807

点赞数

分类专栏：前端 html 文章标签： javascript href a

本文链接：https://blog.csdn.net/xyc_csdn/article/details/71315244

版权

前端同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

html

2 篇文章 0 订阅

订阅专栏

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
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
href="javascript:void(0);"、href="javascript:;"和href="#"

href=”javascript:void(0);” href=”javascript:void(0);”、href=”javascript:void 0;”和href=”javascript:void(1);”表示一个死链接，void是javascript的操作符，意思是：只执行表达式，但没有返回值，void操作符用法格式如下： javascript:void(expression)或java
复制链接

扫一扫

专栏目录