返回列表

转载:<a href="javascript:void(0)">这样写为什么不好?

默认分类 2014/01/24 02:11

以前踩过href="javascript:"导致gif不动以及请求abort的坑。

原文地址:http://segmentfault.com/q/1010000000339082
作者地址: http://segmentfault.com/u/humphry

我再来提供一个视角吧。

<a>标签增加href属性,就意味着以下事情:

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

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

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

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

所以我更倾向于使用方案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>

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

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


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

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

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

这个我之前回答过,就顺(you)便(yi)提一下吧:如何保证各浏览器下 <input><button>

<a target="_blank"> 定义的按钮尺寸一样?</a>