首页 > 文章 > web前端 > 谨慎使用javascript:void(0)，为什么这样写不好

谨慎使用javascript:void(0)，为什么这样写不好

零下一度原创: 2017-05-17 16:03:455137浏览

修正一个说法上的bug吧。对于IE6来说，点击后gif暂停bug仅仅发生在“javascript:伪协议未加分号”的情形下

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

这样写为什么不好?

我再来提供一个视角吧。

给3499910bf9dac5ae3c52d5ede7383485标签增加href属性，就意味着以下事情：

:link选择器可以选择到它

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

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

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

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

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

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

1.
2.
3.
4.
5.
6.<a href="javascript:void(0)">
7.
8.

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

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

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

3在chrome中不再默认跳转到页面头部，4在IE11中不再跳转到页面头部。见下方测试。

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

我更倾向于使用方案4。

至于语义上LZ这种c53ddf0ca6a79e50983ed5bdeb382bf8使用方式，这里已经有了足够详细的回答。我再补充一点，这种情形依然可以做到支持无障碍应用，方法请参考《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中，点击所有的3499910bf9dac5ae3c52d5ede7383485都会造成地址栏的修改，并触发hashchange事件。

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

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

这么写没什么不好的，表明该部分的外观像链接，鼠标需要手型，需要响应点击，但没有实际动作。用来替代href="#"。这种写法实质上并不算做html混杂js。

慎用void(0）

无论是用#还是void(0)，有一个共同的缺点在于：这样做就让这个行为，必须启用js才能实现。别笑，虽然说大多数人是加载js的，但也不能排除连接故障等意外，或真的有少数狂人不用js。另外，js也不能被搜索引擎所跟踪，这是个需要考虑的问题。

从这个意义上讲，#甚至更差一些，因为单独的#在语义上，其实隐含着指向了网页自己，如果使用“在新标签页中打开”时就会产生迷惑。而这个问题void(0)没有。

【相关推荐】

1. 特别推荐：“php程序员工具箱”V0.1版本下载

2. 解决ie6下javascript:void(0) 无效的方法