你好,游客 登录 注册 发布搜索
背景:
阅读新闻

疑问:为什么要使用href=”javascript:void(0);”?

[日期:2014-03-14] 来源:  作者: [字体: ]
  给<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> 定义的按钮尺寸一样?
收藏 推荐 打印 | 录入:Cstor | 阅读:
相关新闻       javascript:void(0) 
本文评论   查看全部评论 (0)
表情: 表情 姓名: 字数
点评:
       
评论声明
  • 尊重网上道德,遵守中华人民共和国的各项有关法律法规
  • 承担一切因您的行为而直接或间接导致的民事或刑事法律责任
  • 本站管理人员有权保留或删除其管辖留言中的任意内容
  • 本站有权在网站内转载或引用您的评论
  • 参与本评论即表明您已经阅读并接受上述条款