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

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

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

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

  1. 从执行效果来看:“javascript:;”直接返回undefined。“javascript:void(0);”要去执行一次表达式“0”,然后返回undefined。
  2. 性能上的区别:javascript:void;会多一次表达式解析。
  3. 空间上区别:“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空间写法

 

  • 14
    点赞
  • 47
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值