我们在使用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空间写法
更多推荐
前端面试——href="#"、href="javascript:void(0)"与href="javascri
发布评论