关于a标签的链接跳转

欢迎您来访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中不能显示)

2.要执行某些处理，但是不整体刷新页面的情况下，可以使用void(0),那什么情况下用void(0)比较多呢，无刷新，当然是Ajax了，看一下Ajax的web页面的话，一般都会看到有很多的void(0)，所以在使用void(0)之前,最好先想一想,这个页面是否需要整体刷新。