a标签的href属性和onclick事件共同使用可能引发的问题

来源:互联网 发布:淘宝女士内裤 编辑:程序博客网 时间:2024/05/17 21:51

WEB前端a标签的使用:

场景描述:门户网站提供apk文件的下载功能,同时需要记录下载日志。这时候在<a>标签的href属性指定资源服务器上提供下载静态资源的URL,同时添加onclick事件用来记录下载日志。

问题:记录日志的ajax请求在firebug中显示Aborted(中断,阻塞)


解决过程:先自己检查了写的js代码,是不是少添加了某个属性(例如:contentType、dataType、error),这个时候真的很纠结,google、baidu。有的说是ajax 内存溢出,有的是ajax请求超时。于是就开始改js改过来改过去貌似都一样。后来还是google看到了一篇关于IE6下同时使用href属性和onclick事件的引发的ajax请求被中断的文章引发了思考找到了解决的办法。

文章描述:

HTML代码:<a href="javascript:void(0);" id="hello"></a>

JS代码:
$("#hello").click(function(){
   ajax.send(url);
});
在IE6中,会出现这个ajax请求,被中断(http请求提示:“aborted”)
产生的原因:
a标签的默认事件为跳转,也就是执行href="url",当我们设置为href="javascript:void(0);",其实就是为了阻止跳转这个默认事件。
IE6下,如果a标签被设置为href="javascript:void(0);"时,当我们点击a标签,先执行onclik事件,然后它再执行void(0);,它会阻止a标签的默认跳转行为的同时,也阻止了ajax请求,也就是为什么ajax突然被中断的原因。(onclik事件和阻止事件,间隔时间很小,几乎是同时触发的)

解决方法:
(1)在onclik事件上,添加setTimeOut,这样阻止默认事件的行为,先执行了,然后,再执行发送ajax请求。
$("#hello").click(function(){
   setTimeout(function(){ajax.send(url);}, 1000);
});

2)在onclik事件上,主动添加默认事件阻止,后面的href="javascript:void(0);"则不阻止。ajax请求正常发送。
$("#hello").click(function(e){
   e.preventDefault();
   ajax.send(url);
});


原创粉丝点击