前端面试——href="#"、href="javascript：void(0)"与href="javascript：;"的区别

最新推荐文章于 2023-05-30 11:39:11 发布

原创最新推荐文章于 2023-05-30 11:39:11 发布 · 7.6k 阅读

47 ·

CC 4.0 BY-SA版权

文章标签：

#前端面试 #html #链接

前端专栏收录该内容

64 篇文章

订阅专栏

本文探讨了HTML中a标签的两种空链接用法：href=#与href=javascript:void(0)的区别。前者用于页面内定位，后者创建死链接阻止默认行为，适用于执行JS函数而不跳转。

我们在使用a标签的空链接时，通常写为 href=# 或者 href=javascript:void(0) ，这两种写法有什么区别呢？我想很多人都不会去深究，但是这两种写法出来的效果有时候是不一样的。

概括来说，这两种写法有如下几个区别：

# 包含了一个位置信息，默认的锚是 #top 也就是网页的上端。
而javascript:void(0), 仅仅表示一个死链接，当 href=javascript:void(0) 的空链接被点击时，页面不会有任何反应。
在页面很长的时候会使用 # 来定位页面的具体位置，格式为：# + id。
如果你要定义一个死链接请使用 javascript:void(0) 。

下面实例代码演示上述1、2点的区别：

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>a标签空链接href=#与href=javascript:void(0)的区别</title>
</head>

<body>
    <p style="height:1300px;width:100%;background:#cccccc"></p>
    <p style="width:100%;padding:10px;background:#999999">
        <a href="#">空链接: href=#</a>
        <br>
        <a href="javascript:void(0)">空链接: href=javascript:void(0)</a>
    </p>
    <p style="height:100px;width:100%;background:#cccccc"></p>
</body>

</html>

使用 # 来定位页面的具体位置的实例代码：

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>a标签空链接href=#与href=javascript:void(0)的区别</title>
</head>

<body>
    <p style="width:100%;padding:10px;background:#999999">
        <a href="#p1">跳到目标位置: href=#p1</a>
    </p>
    <p style="height:100px;width:100%;background:#cccccc"></p>
    <p id="p1" style="height:1000px;width:100%;padding:10px;background:#999999">目标位置：id="p1" </p>
</body>

</html>

为什么要使用href=”javascript:void(0);”

href=”javascript:void(0);” 的含义是，让超链接去执行一个js函数，而不是去跳转到一个地址，而void(0)表示一个空的方法，也就是不执行js函数。

javascript:是伪协议，表示url的内容通过javascript执行。void(0)表示不作任何操作，这样会防止链接跳转到其他页面。这么做往往是为了保留链接的样式，但不让链接执行实际操作。下面的语句：

<a href="javascript:void(0)" onclick="window.open()">

点击链接后，页面不动，只打开链接。而下面的语句：

<a href="#" onclick="javascript:return false;">

作用一样，但不同浏览器会有差异。

多数情况下，当某一链接要执行一个javascript程序时，我们可以使用href=javascript:void(0)再加上onclick事件来实现，如下面实例代码：

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>a标签空链接href=#与href=javascript:void(0)的区别</title>
</head>

<body>
    <p style="width:100%;padding:10px;background:#999999">
        <a href=javascript:void(0) onclick=func()>点击执行函数func()</a>
    </p>
    <script>
    function func() {
        alert("ok");
    }
    </script>
</body>

</html>

javascript:;与javascript:void(0)的区别

从执行效果来看：“javascript:;”直接返回undefined。“javascript:void(0);”要去执行一次表达式“0”，然后返回undefined。
性能上的区别：javascript：void;会多一次表达式解析。
空间上区别：“void(0);”比“;”多7个字符。

<a href="#" >test</a> //点击链接，页面默认上滚到页的顶部，但可以加上 onclick="return false"，防止上滚到页的顶部
<a href="####" >test</a> //使用2个到4个#，见的大多是"####"，也有使用"#all"等其他的。默认不上滚到页的顶部
<a href="javascript：void(0);" >test</a> //新浪微博写法，javascript:void(0) 仅仅表示一个死链接，执行空事件
<a href="javascript：;" >test</a> //QQ空间写法