问题总结： 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掉，因此这种方案在网络不好的时候会失效。

解决方案：
1、 在onclick上加return
false阻止浏览器执行href="javascript:void(0);" 。
<a href="javascript:void(0);" class="rankItem" onclick="return false;"></a>

2、 不用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="#" onclick="触发一个事件的函数"></a>
3.<a href="javascript:void(0);" onclick="触发一个事件的函数"></a>
或<a href="javascript:;" onclick="触发一个事件的函数"></a>

不同浏览器中<a>标签的兼容性
对于非IE内核浏览器 而言，3种写法都是可以的，基本没有什么区别。对于IE浏览器或者IE内核的浏览器而言则不同：这不同主要体现在第2和3这二种写法上。 第3种IE内核有时候会不认 href="javascript:void(0);" 因而触发不了事件函数，导致点击没有任何反应。

第2、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;
}
}

附件：