为什么要使用href=”javascript:void(0);”(未完待续)

原文链接：http://www.chinacloud.cn/show.aspx?id=15041&cid=22

     给<a>标签增加href属性，就意味着以下事情：

　　:link选择器可以选择到它

　　这个a标签可以获得焦点（可以通过tab按键访问到）

　　在浏览器的默认样式表中，有href属性的<a>标签才有cursor:pointer的效果（尤其是在低版本的IE上）。

　　绑定了onclick事件的<a>标签，尤其是它的作用是ajax请求时，基本上我们就用不上这个标签的默认行为，也连接不到的实际页面，一般而言也会在CSS里给予了这个元素的cursor等样式。这时候还要加上href属性，是为了：

　　让<a>够响应键盘事件并获得焦点（从而屏幕阅读器能够读出背后的内容，增强可访问性）

　　优雅降级，在网络连接很差，还没有加载到CSS的时候，<a>依然有手型与正常的link样式。

　　给<a>标签以href属性，并不连接到实际的页面的方案有：

　　<a href="#"></a>

　　<a href="#nogo"></a>

　　<a href="##"></a>

　　<a href="###"></a>

　　<a href="javascript:void(0);"></a>

　　<a href="javascript:void(0)"></a>

　　<a href="javascript:;"></a>

　　<a href="javascript:"></a>

　　他们的体验有细微的差别。

　　1，点击这个链接后，会让页面跳到头部，window.location.href末尾增加#（若window.location.href末尾没有#），除非在js里面捕获onclick事件并阻止默认事件。

　　2有了初步的语义。但是，如果页面里面有id为nogo的元素，点击这个链接后，锚点机制会作用，页面贴齐这个元素上缘。更详细的，详见张鑫旭的《URL锚点HTML定位技术机制、应用与问题》

　　3在chrome中不再默认跳转到页面头部，4在IE11中不再跳转到页面头部。正常的点击不会在地址栏增加#，但若用户使用open in new tab的方式（比如中键），就会跳到形如http://segmentfault.com/q/1010000000339082###的地址，见下方测试。

　　5~8作用相同，但使用了javascript伪协议。在IE6下面，这个a标签被点击后，IE6会使得页面中的gif暂停，并且触发onbeforeunload事件(详情参考这里)，IE6认作这个页面有了重定向，并abort之后所有的请求（参考这里）。所以假如你在此之后替换了一个<img>的src，IE6完全不会完成这个新的请求。

　　所以我更倾向于使用方案4。

　　至于语义上LZ这种<a href="javascript:void(0)">使用方式，LS多人已经有了足够详细的回答。我再补充一点，这种情形依然可以做到搜索引擎友好支持无障碍应用，方法请参考《WAI-ARIA无障碍网页应用属性》。

　　更新，我做了如下的测试：

　　<p>

　　<a href="#">#</a>

　　</p>

　　<p>

　　<a href="##">##</a>

　　</p>

　　<p>

　　<a href="###">###</a>

　　</p>

　　<p>

　　<a href="####">####</a>

　　</p>

　　<p>

　　<a href="#####">#####</a>

　　</p>

　　<script type="text/javascript">

　　var n = 0 ;

　　window.onhashchange = function(){

　　alert(++n) ;

　　}

　　</script>

　　在IE11中，点击###、####和#####时，页面不再跳转到头部

　　在chrome中，点击##、###、####和#####时，页面不再跳转到头部。

　　但是在IE11和chrome中，点击所有的<a>都会造成地址栏的修改，并触发hashchange事件。

　　所以之前说的“###不会造成地址栏的改变”是错误的。

　　没有大规模测试其他的浏览器，这里做初步猜想：###的意义在于，这是字符数最少的，在所有的浏览器中不会导致跳转到页面头部的锚点。

　　再次更新，这个问题引发了很多关于语义的友好讨论啊，真好。

　　我赞同@fox同学的“不要滥用a来替代button”。

　　问题在于，如果需要使用button，语义解决了，多浏览器样式兼容又坑爹了……

　　这个我之前回答过，就顺(you)便(yi)提一下吧：如何保证各浏览器下 <input><button> 定义的按钮尺寸一样？