a标签空链接href=#与href=javascript:void(0)的区别
作者:admin 时间:2018-3-23 8:34:55 浏览:我们在使用a标签的空链接时，通常写为 href=# 或者 href=javascript:void(0) ，这两种写法有什么区别呢？我想很多人都不会去深究，但是这两种写法出来的效果有时候是不一样的。
概括来说，这两种写法有如下几个区别：
- # 包含了一个位置信息，默认的锚是
#top也就是网页的上端。即是说，当href=#的空链接被点击时，页面会跳到最顶端。 - 而
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);”，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)的理解
void运算符
简介：
void 是 javascript 的操作符，意思是：只执行表达式，但没有返回值。该表达式会被计算但是不会在当前文档处装入任何内容，例如，void(0) 计算为 0 ，但在JavaScript上没有任何效果，也就是说 <a href="javascript：void(0)"> 的作用和 <a href="javascript：void(1)"> 的作用是一样的。
void 操作符用法格式如下：
javascript：void (表达式) //推荐此写法
javascript：void 表达式
点击链接的操作
做页面时，如果想做一个链接点击后不做任何事情，或者响应点击而完成其他事情，例如点击链接后不做任何事情，代码如下：
<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空间写法
点击链接后，响应用户自定义的点击事件
<a href="javascript：void(0)" onclick="func()">test</a> //其中func() 是 javascript 方法，即函数
<a href="#" onclick="func();return false;"> //什么问题都解决了,包括浏览器不兼容问题</a> 或者直接使用href=""
<a href="#" onclick="alert();event.returnValue=false;">test</a>
ajax 之 void(0)
在 Ajax 中，都会常见如下的代码：
<a href="javascript:doTest2();void(0);">here</a>
但这里的void(0)究竟是何含义呢？
Javascript中void是一个操作符，该操作符指定要计算一个表达式但是不返回值。
在 Ajax 的页面，实现的是无刷新操作，使用 void(0)也 比较多。看一下Ajax的web页面的话，一般都会看到有很多的void(0)，所以在使用void(0)之前，好先想一想，这个页面是否需要整体刷新。
href="#" 的情况处理
做页面时，如果是个# ，就会出现跳到顶部的情况,个人收藏的几种解决方法，其中，"＃" 包含了一个位置信息，默认的锚点是＃top 也就是网页的上端。
<a href="####"></a>
<a href="javascript:void(0)"></a>
<a href="javascript:void(null)"></a>
<a href="#" onclick="return false"></a>
<span style="cursor:hand"></span>(好像在FF中不能显示)
相关文章
- 站长推荐
