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

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);
});


  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值