html 空链接 href="#"与href="javascript:void(0)"的区别
详细出处参考:http://www.jb51.net/web/24898.html
#包含了一个位置信息
默认的锚是#top 也就是网页的上端
而javascript:void(0) 仅仅表示一个死链接
这就是为什么有的时候页面很长浏览链接明明是#但跳动到了页首
而javascript:void(0) 则不是如此
所以调用脚本的时候最好用void(0)
你可使用如下例子来测试一下:
html中href="#"基本上没有什么意义大部分的使用都是用在javascript的调用上。比如 <a href="#" onclick="DoClick(this)" id="href1">XXX</a> 如果没有在javascript使用的话#代表当前页面补充如果#后面带有字符串那么它代表的是移动到在当前页面带有书签标签的地方。如: <a href="index.html#abc">XXX</a>
我们经常会用链接<a> 来代替 <button> 触发onclick事件。
比如<a href="javascript: alert()">测试</a>
这样做出现的结果就是: 执行了alert()后,直接跳到了一个空页面.因为html本身对 <a>标签的href属性做了处理,所以就会先执行我们自己定义的方法,接着再运行它自身的方法(跳转的方法)。
那么以前我是怎么做的呢? 我将代码改为<a href = "#" onclick="alert()">,这样就不会出现上述的问题了,这个是通过对href属性的了解,只要赋给href=“#”,那么它便不会跳到空页面。 我本以为这样的问题已经解决了,
想不到这种写法也有个问题,就是当页面出现垂直滚动条的时候,比如你的链接是在页面最底端,你需要将滚动条拉下才能看到此链接,你点击链接,就会先执行alert(),这个时候滚动条会自动拉上去到页面顶端,这给使用系统的客户造成了很大的不方便,由于页面自动往顶端跳,用户又要下拉滚动条来操作。这个说明执行了alert()方法后,浏览器自身也执行了自己的方法。
这样考虑之后,现在的做法是 <a href="" onclick = "alert();event.returnValue=false"/>,浏览器也是要响应这个事件,那么我们将这个事件停止传播了,自然也就没上面的问题了,当然event.returnValue只是IE的特有,如果要兼容firefox,mozilla ,可能需要考虑兼容性的编码了,但这不是表达的重点.
所以在平时的页面设计中,最好都是用button来响应onclick事件,如果有涉及到链接的,希望我这种做法能给大家带来帮助。
语言表达有限,如果觉得写得不太清楚的,请大家运行下面的例子,最后三个链接就是我刚刚讲的三种情况,此例子在IE6.0是通过的。
<BODY>
<p>
<a href="#" onclick="alert()">test</a> </p>
<p>
<a href="#" onclick="alert()">test</a> </p>
<p>
<a href="#" onclick="alert()">test</a> </p>
<p>
<a href="#" onclick="alert()">test</a> </p>
<p>
<a href="#" onclick="alert()">test</a> </p>
<p>
<a href="#" onclick="alert()">test</a> </p>
<p>
<a href="#" onclick="alert()">test</a> </p>
<p>
<a href="#" onclick="alert()">test</a> </p>
<p>
<a href="#" onclick="alert()">test</a> </p>
<p>
<a href="#" onclick="alert()">test</a> </p>
<p>
<a href="#" onclick="alert()">test</a> </p>
<p>
<a href="#" onclick="alert()">test</a> </p>
<p>
<a href="#" onclick="alert()">test</a> </p>
<p>
<a href="#" onclick="alert()">test</a> </p>
<p>
<a href="javascript:alert()" >test</a> </p>
<p>
<a href="#" onclick="alert();event.returnValue=false;">test</a> </p>
</BODY>
今天看到《AJAX开发简略》中所有的<A href>都用到了javascript:void(0)
今天看了一下原来这个表达式的作用就是让当前这个超链接成为一个死链接,就是什么都不作。
以下摘自:
http://blog.csdn.net/mouyong/archive/2007/01/24/1491761.aspx
别人些的JavaScript脚本可以看到这样的代码:
<a href="javascript:doTest2();void(0);">here</a>
但这儿的void(0)究竟是何含义呢?
JavaScript中void是一个操作符,该操作符指定要计算一个表达式但是不返回值。
void 操作符用法格式如下:
1. javascript:void (expression)
2. javascript:void expression
expression 是一个要计算的 JavaScript 标准的表达式。表达式外侧的圆括号是可选的,但是写上去是一个好习惯。
你可以使用 void 操作符指定超级链接。表达式会被计算但是不会在当前文档处装入任何内容。
下面的代码创建了一个超级链接,当用户点击以后不会发生任何事。当用户点击链接时,void(0) 计算为 0,但在 JavaScript 上没有任何效果。
<A HREF="javascript:void(0)">单击此处什么也不会发生</A>
下面的代码创建了一个超级链接,用户单击时会提交表单。
<A HREF="javascript:void(document.form.submit())">单击此处提交表单</A>
以下转自:
http://www.cnblogs.com/xiang/archive/2006/09/05/495828.html
#包含了一个位置信息默认的锚点是#top 也就是网页的上端,而javascript:void(0) 仅仅表示一个死链接.这就是为什么有的时候页面很长浏览链接明明是#可是跳动到了页首,而javascript:void(0) 则不是如此所以调用脚本的时候最好用void(0),或者<input onclick><div onclick>等.
以下摘自:
http://bbs.blueidea.com/thread-2694666-1-1.html
void 运算符
避免表达式返回值。
void expression
expression 参数是任意有效的 JScript 表达式。
说明
void 运算符对表达式求值,并返回 undefined。在希望求表达式的值,但又不希望脚本的剩余部分看见这个结果时,该运算符最有用。
html标记a属性href & onclick执行顺序
<a href=# onclick="function(); return false;">bbb</a>
在点击第一个超链接时,页面会显示没有转向到aa.html.
因为这是个执行顺序的问题。<a>这个标签的执行顺序应该是先执行onclick的脚本,最后才进
行href参数指定页面的跳转。在onclick中返回false,就可以中止<a>标签的工作流程,也就
是不让页面跳转到href参数指定的页面。