a标签中的href,onclick,#,javascript:void简要分析

<script type="text/javascript"> window.onbeforeunload=function() { alert("onbeforeunload event..."); //return false; } </script> <a href="#" onclick="return true;">测试1</a><br/> <a href="javascript:void(0)" onclick="return true;">测试2</a><br/> <a href="javascript:void(0)" onclick="return false;">测试3</a><br/> <a href="javascript:void(alert('test 4....'))" onclick="return true;">测试4</a><br/> <a href="javascript:void(alert('test 5....'))" onclick="return false;">测试5</a><br/>

 

    在开发过程中，经常会使用测试1<a href='#' onclick='fun();return false;'/>这种方式来触发javascript事件而不改变当前链接.

或者测试2<a href="javascript:void(0)" onclick="return true;">测试2</a>这种方式来建立死链接。但是只要看过a href=”《javascript:void(0);” — avoid the void》和《How to Create Pop-Up Windows》这2篇文章后就能发现，作者更赞同使用测试1的方式而不是测试2，我也是认同作者的观点。

    在web标准中也是不建议使用测试2的方式的，但是测试2javascript:void(0)伪协议也会有bug存在，会使gif动画停止播放。

在测试2的案例中，我们还能看到，点击事件触发的时候（调用顺序：onclick->window.onbeforeunload->href），而测试1却没有，这是因为void运算符在执行之前会调用window.onbeforeunload方法

对于void运算符（void只做运算，返回结果为undefined）,所以在调用到href时遇到void运算符的时候，可能就会产生一些bug

 

    但是使用测试1的方式href='#' onclick中加上return false，也会存在问题，导致点击链接页面返回顶部，这是由于#号默认锚点为#top,点击后重新定位到top锚点位置，当然可以自己再重新定义一个top锚点，但是这也不能很好解决问题，仍然也存在定位不准。有些朋友喜欢使用####来替换#(#一般为2到6个，大多都取4个)。无论#几个都是会存在这个bug的，原因同上。

点击链接导致页面返回顶部也可以采用span标签替换a标签来解决，但是还可以不改变标签，只需讲#用#this替换即可解决问题,也可以采用其它锚点

<a href='#this' onclick='fun();return false;'/>

 

另：当window.onbeforeunload中return false的时候将会有意想不到的收获。提示“确实要离开页面吗？确定...取消...”