问题总结： http200被Aborted

问题描述：

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

1. a标签的href="javascript:void(0);"

2.a标签点击事件主要js

$('.rankItem').bind('click',function(){

    ……

    $('').html('<img src="'+_data.picture+'"  class="itemImg'+inId+'">');

    ……

});

问题表现：

Fiddler抓包结果：  aborted  http://XXX/M00/CD/24/tz0M9VSSyHAAAAAAAABejGfCxMY531.jpg（资源连接） 200

Http请求虽然返回200，但当前页面发出的http请求还未返回的就被客户端主动断开连接（Aborted）,致使响应资源不能被彻底加载到页面，例如出现图片等资源无法加载的问题。

本质缘由：

YY客户端的浏览器是IE内核， IE内核的浏览器，识别<a>标签的时，先去找  href  属性，而且先执行href中的连接或者函数，若是不识别就不作任何反应[IE最新版已经修改这个问题了]。IE内核有时候会不认href="javascript:void(0);" 于是触发不了事件函数，致使点击没有任何反应，有时候会错误的认为页面刷新或者重定向，而且中断了当前全部链接，致使请求被客户端主动断开连接（Aborted）。 

临时解决方案：

延迟(100ms)执行页面资源的加载;

$('.rankItem').bind('click',function(){

    ……

     setTimeout(function(){

         $('').html('<img src="'+_data.picture+'"  class="itemImg'+inId+'">');

     },100);

    ……

});

临时解决方案原理和缺陷：

a标签的点击事件延迟100ms，页面的刷新或重定向在100ms内完成，100ms以后再对页面进行渲染，加载资源。

在网络条件比较好的状况下，这是没有问题的，但，若是所处的网络环境很差，在必定程度上是没办法保证该页面在100ms内能够返回，一旦100ms没法返回，就会执行a标签的 href="javascript:void(0);" ，从而把当前的页面进行重定向，而又当前页面发出的http请求（加载资源）但还未返回的就会被浏览器abort掉，所以这种方案在网络很差的时候会失效。

解决方案：

一、  在onclick上加return false阻止浏览器执行 href="javascript:void(0);"   。

<a href="javascript:void(0);" class="rankItem" οnclick="return false;"></a>

二、  不用href="javascript:void(0);" 属性,至关于span标签，固然用div或者span替换a标签也行，连接的手势能够经过样式style=“cursor:pointer;”。

番外方案：

用event.preventDefault()。

该方法 用于取消事件的默认行为 ，存在浏览器兼容问题。

event.preventDefault()方法不被ie支持，在ie下须要用window.event.returnValue = false; 来实现。

function stopDefault( e ) { 

     if ( e && e.preventDefault ){ 

        e.preventDefault();

     } else { 

        window.event.returnValue = false;

     } 

}

问题拓展1：

连接的onclick事件<a>标签的写法一般有以下三种：

1.<a href="连接地址" ></a>

2.<a href="#" οnclick="触发一个事件的函数"></a>

3.<a href="javascript:void(0);" οnclick="触发一个事件的函数"></a>

     或<a href="javascript:;" οnclick="触发一个事件的函数"></a>

不一样浏览器中<a>标签的兼容性

 对于非IE内核浏览器 而言，3种写法都是能够的，基本没有什么区别。 对于IE浏览器或者IE内核的浏览器而言则不一样：这不一样主要体如今第2和3这二种写法上。  第3种IE内核有时候会不认  href="javascript:void(0);" 于是触发不了事件函数，致使点击没有任何反应。

第二、3种的区别：

"#"包含了一个位置信息，默认的锚点是#top 也就是网页的上端。 javascript:void(0) 仅仅表示一个死连接， 这就是为何有的时候页面很长浏览连接明明是＃但是跳动到了页首。 而javascript:void(0) 则不是如此，因此调用脚本的时候最好用void(0)，或者<span onclick> <div onclick>等， 采用这个方式 javascript:void(0) 实现点击事件时， 运行起来，若是页面内容不少，有滚动条时，页面不会乱跳，用户体验更好。

问题拓展2 ：

尽可能不要用javascript:协议作为a的href属性，这样不只会致使没必要要的触发window.onbeforeunload事件，在IE里面更会使gif动画图片中止播放。

问题拓展3 ：

event.preventDefault() 能够处理ie firefox下图片拖动的问题。

document.onmousemove = function(ev) {　　

        var oEvent = ev || event;

        if (oEvent.preventDefault) {

            oEvent.preventDefault();

        } else {

            oEvent.returnValue = false;

        }

}

附件：