欢迎您来访https://leezhang521.github.io
a标签的javascript:void(0)
(一)
在写页面的时候,点击链接,有两种情况,一种是跳转到另一个页面,一种是只有点击链接效果而没有产生跳转到另一个页面的效果。当我们给a标签设置属性href="#"的时候,点击链接后会回到页面顶部,没有很好的用户体验
解决的办法有如下几种
-
点击链接后不出现任何效果
<a href="javascript:void(0);" >test</a> <a href="javascript:;" >test</a> <a href="####" >test</a> //使用2个到4个#,见的大多是"####",也有使用"#all"等
-
点击链接后,响应用户自定义的点击事件
<a href="javascript:void(0)" onclick="doSomething()">test</a> <a href="#" onclick="doSomething();return false;">什么问题都解决了,包括浏览器不兼容问题</ a> //或者直接使用href="" <a href="#" onclick="alert();event.returnValue=false;">test</a>
一些小建议
1.建议少写javascript:void(0);
2.链接(href)直接使用javascript:void(0)在IE中可能会引起一些问题,比如:造成gif动画停止播放等,所以,最安全的办法还是使用“####”。为防止点击链接后跳转到页首,onclick事件return false即可。
3.若只是显示鼠标移过,变成手形,可以使用样式<span style="cursor:pointer" onclick="foo()">Click Me!</span>
注释:
1.在这里的void是javascript的操作符,表示只执行表达式,但没有返回值,而void的操作符用法格式是
javascript:void (expression)
javascript:void expression
在这里void是javascipt自身的操作符,它表示的是只执行表达式,但没有返回值!expression 是一个要计算的 Javascript 标准的表达式。
另外页面会自动调回顶端,是因为"#"默认的瞄点位置是top,所以会出现这种情况。
表达式会被计算但是不会在当前文档处装入任何内容,void(0)计算为0,但在JavaScript上没有任何效果,也就是说 <a href="javascript:void(0)">
的效果同<a href="javascript:void(1)">
的效果是一样的。也就是表达式会被计算,但在javascript中没有任何效果。
在这里举个例子
<a href="javascript:void(document.form.submit())">点击提交</a>
区别
1.a href=#与 a href=javascript:void(0) 的区别
1)#包含了一个位置信息,默认的锚是#top ,也就是网页的上端
2)javascript:void(0) 只表示一个链接,调用脚本的时候用这个比较合适,又或者给标签添加一个点击事件,比如<input onclick> ,<div onclick>
(二)
1.可采用的链接办法如下
1) window.open("url")
2)自定义函数
<script>
function openWin(tag,obj){
obj.target="_blank";
obj.href = "Web/Substation/Substation.aspx?stationno="+tag;
obj.click();
}
</script>
javascript:void(0);在浏览器上有兼容性问题,个人认为javascript:;比较适用
(三)总结
1.针对"#",出现调到顶部的情况
1:<a href="####"></a>
2:<a href="javascript:void(0)"></a>
3:<a href="javascript:void(null)"></a>
4:<a href="#" onclick="return false"></a>
5:<span style="cursor:hand"></span>(好像在FF中不能显示)