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


我再来提供一个视角吧。

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

  • :link选择器可以选择到它
  • 这个a标签可以获得焦点(可以通过tab按键访问到)
  • 在浏览器的默认样式表中,有href属性的<a>标签才有cursor:pointer的效果(尤其是在低版本的IE上)。

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

  • <a>够响应键盘事件并获得焦点(从而屏幕阅读器能够读出背后的内容,增强可访问性)
  • 优雅降级,在网络连接很差,还没有加载到CSS的时候,<a>依然有手型与正常的link样式。

<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>

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

  • 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之后所有的请求(参考这里)。所以假如你在此之后替换了一个<img>的src,IE6完全不会完成这个新的请求。

我更倾向于使用方案4。

至于语义上LZ这种<a href="javascript:void(0)">使用方式,这个贴里已经有了足够详细的回答。我再补充一点,这种情形依然可以做到支持无障碍应用,方法请参考《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事件。

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

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

坏处:

1、javascript: 是伪协议,是非标准化的协议
2、不能平稳退化,当用户的浏览器对JS失效或禁用时点击后什么意义都没有
3、大部分搜索引擎不会搜索到它,因为没有内容,从而影响排名 (# 是不是也算上空链?空链对搜索引擎也不友好)


解决方法:

1、将 javascript:、 #、 ### 替换成真实网址,并取消 <a> 的默认点击事件,return false 或event.preventDefault,如果JS失效了该链接虽功能上打了些折扣,但并没有彻底失效,做到了“平稳退化”

如:本网站侧边栏的“邀请回答”的 http://segmentfault.com/q/1010000000339082# 可以替换成真实地址http://segmentfault.com/q/1010000000339082,然后继续它之后的事件

2、将不该是按钮的改成按钮。好多人都在“烂”用 <a>,每个人都想让它去完成 <button> 的事情,可看下这篇文章《你不能创造一个按钮》,讲的有些道理

a标签的href="javascript:void(0)"和href="#"的区别的更多相关文章

  1. 曾经遇到的坑------href="#"和href="javascript:void(0);"、href="javascript:;"

    这个是为了 在点击此链接后回到页首,如果你写href="#"那么点击后会回到页首,这样影响操作. <a href="javascript:void 0" ...

  2. href="javascript:void(0)" 的用法

    href=”javascript:void(0);”这个的含义是,让超链接去执行一个js函数,而不是去跳转到一个地址,而void(0)表示一个空的方法,也就是不执行js函数. 为什么要使用href=” ...

  3. 为什么要使用href=”javascript:void(0);”

    为什么要使用href=”javascript:void(0);”   href=”javascript:void(0);”这个的含义是,让超链接去执行一个js函数,而不是去跳转到一个地址,而void( ...

  4. 一个好玩的小制作,以及在<a/>中的标签href="javascript:;"/href="javascript:void(0);"/href="javascript:"的用法

    一:一个小图标的制作 我们在支付宝.微信等某些地方上传文件时会遇到以下的图标,但是这样的图标其实可以用<a/>标签以及css样式完成, 具体代码如下: <!DOCTYPE html& ...

  5. javascript ie8兼容 a标签href javascript:void(0);

    ie8兼容 a标签href javascript:void(0); 尽量不要用javascript:协议做为A的href属性,这样不仅会导致不必要的触发window.onbeforeunload事件;

  6. a标签中的href="#"与href="javascript:void(0)"区别

    转自http://blog.csdn.net/fightplane/article/details/5190037 <a href="#"> 点击链接后,页面会向上滚到 ...

  7. a标签使用href=”javascript:void(0); 在火狐浏览器跟chrome 不兼容

    使用如下方式的链接.在Chrome中点击后行为符合预期,但在IE下会新开标签卡(根据参考资料,Firefox中有相同问题).<a href=”javascript:void(0);” targe ...

  8. 为了防止页面重新自动加载,可以给a标签设置href="javascript:void(0);"

    <a href="javascript:void(0);"></a> <!--按照格式要求,此处的0不能省略!! 虽然省略看上去也没什么影响.但是当发 ...

  9. href="javascript:;" href="javascript:void(0);" href="#"区别

    一.href="javascript:;" 这种用法不正确,这么用的话会出现浏览器访问"javascript:;"这个地址的现象: 二.href="j ...

随机推荐

  1. swift Swauth install

    devAuth 是swift原生的认证中间层, Swauth是为了解决devAuth不能扩展的问题而开发的替代方案. Quick Install #git clone https://github.c ...

  2. 使用Windows Azure创建Windows系统虚拟机-上

    创建虚拟机来运行Windows 本教程介绍了如何轻松创建运行Windows 的 Azure虚拟机(VM),用作来自Azure管理门户中映像图库的Windows 服务器映像.映像图库提供了多种图像,包括 ...

  3. HW5.11

    public class Solution { public static void main(String[] args) { System.out.printf("%s\t%s\n&qu ...

  4. [Locked] Range Sum Query 2D - Mutable

    Range Sum Query 2D - Mutable Given a 2D matrix matrix, find the sum of the elements inside the recta ...

  5. 学习Visitor Pattern 有感而发!override and overload

    通过阅读各位前辈写的博文,像吕震宇,idior,李建忠WebCast等,对Visitor模式有一定的了解,有感而记录下来,以备忘. Visitor Pattern 假设了这样一个场景,在一个类型层次中 ...

  6. 线段树练习[单点更新] HDU 2795 Billboard

    题目大意:有一个h*w的公告榜,可以依次在上面添加信息.每个信息的长度为x,高为1. 优先在最上面加入,如果空间足够的话,然后优先放在最左面.统计每条公告最终的位置,即它所在的行数. 这里是线段树来存 ...

  7. Hyper-V虚拟化--逻辑网络、VM网络、逻辑交换机

    逻辑网络承接物理网卡和VM网卡 可以关联站点.主机组.VLAN.IP子网,配置静态IP地址池(虚机的PA地址从该静态IP地址池获取) 只有当逻辑网络中的网络站点关联了VLAN后,在VM中才可以选择VL ...

  8. 【42】了解typename的双重意义

    1.在template声明中,class与typename是等价的,但是使用typename更好. 2.在template实现中,模版形参是从属名称,嵌套在模版形参中的类型是嵌套从属名称,不依赖任何t ...

  9. nginx模块编程之获取客户ip及端口号

    ngx_request_t结构体中有一个connection定义,该定义指向一个ngx_connection_t的结构体: 结构体定义如下: struct ngx_connection_s { voi ...

  10. jfinal获取当前访问路径和端口号

    public void generateSingleLicense() throws Exception { System.out.println(getRequest().getRequestURL ...