IE6 a href onclick 执行顺序 && IE6下a标签发ajax请求的深坑

IE6 a href onclick 执行顺序

第一篇 百度的转摘:http://hi.baidu.com/daijun2007/blog/item/750259df953c071e62279868.html

<a href='javascript:void(0);' οnclick='_gotoPage(url_go , 2, 10)' >")下一页</a>

IE6下上面的onclick事件不会被响应,换成下面的就OK了,加上return false

<a href='javascript:void(0);' οnclick='_gotoPage(url_go , 2, 10) return false;' >")下一页</a>;

请求的链接是用的 A 标签,A上同时写了href和onclick事件。对于链接 A 标签而言,当用户鼠标单击的时候,A对象被触发时会首先去执行onclick部分,然后是href,如果是ie6的话,执行onclick,发出http请求。瞬时又执行href,这时ie6就会abort前一个请求。

第二篇 脚本之家的转摘:http://www.jb51.net/article/13397.htm

<a οnmοuseup="func('onmouseup')" href="b.html">Click Me!</a>
<a οnclick="func2('onclick')" href="d.html">Click Me!</a>
<span id="msg"></span><br />

<script type="text/javascript">
function func(str){
msg(str);
window.location.href="c.html";
}
function msg(str){
//document.getElementById("msg").innerHTML=str; //A
alert(str); //B
}
function func2(str){
msg(str);
window.location.href="e.html";
}
</script>


在msg(str)有个注释掉的行,试验的时候分别执行A和B。

 AB
onmouseuponclickonmouseuponclick
IEb.htmld.htmlb.htmld.html
FireFoxc.htmle.htmlc.htmle.html



上表主要列出了两个浏览器中的执行顺序,红色代表页面脚本跳转的页面,蓝色是Anchor标签的href属性。从上面可以看出,对于FireFox,始终先执行页面脚本,然后浏览器再跳转。而IE里面执行的过程却有差别:
1、使用后退按钮直接回到a.htm,即页面只执行了一个跳转;
2、在使用alert中断的情况下,onmouseup执行了页面脚本中的跳转。

从上可以看出,
1、对于FireFox而言,页面脚本执行顺序始终优先于浏览器内嵌脚本执行顺序,这个已经很明显了。
2、IE中,HREF的执行顺序为onmouseup->href->onclick。真的吗?

为了更加明确2中的执行顺序,我们继续分析onclick和href的执行顺序关系。在上述例子中,onclick是采用调入的方式执行的。如果a. 我们使用以下的测试代码:
<a href="d.htm" οnclick="return false;">Click Me!</a>
发现HREF不能被执行。
b. 如果我们使用以下测试代码:
<a href="d.htm" οnclick="window.location.href='e.htm';return false;">Click Me!</a>
发现依旧执行HREF的d.htm,而不是onclick中的e.htm。
c. 如果我们使用以下测试代码:
<a href="d.htm" οnclick="msg('onclick');return false;">Click Me!</a>( function msg()的代码如上)
发现执行了function msg(),而HREF不被触发。

d. 如果我们使用以下测试代码:
<<a href="d.html" οnmοuseup="msg('onmouseup');return false;">Click Me!</a>>

发现未执行onmouseup,而执行 href的d.html


IE6下a标签发ajax请求的深坑

首先感慨下,这真的是个深坑啊,找了一下午才找到原因和解决方案,问题的定位应该是IE6的bug,可是他老爹一直未修复,现在他老爹也已经不管他了,所以修复bug是不可能了,只能想办法避免这个bug。可能我还太年轻吧,据说这个bug已经是业界的基本常识了,可是我却只能在踩到坑后才知道,不过还是要记录下,以免下次再踩坑。

忘了说了此坑还有一个前提就是,必须是手动触发ajax请求时才会产生,且a的href为‘javascript:;’或‘javascript:void(0);’。

先看个DEMO,注意用IE6打开,不然看不到效果。

分别点击两个链接,IE6下得到的结果是不一样的,但是其实差别就在一句代码,一句看似不需要的代码。先分析下现象吧,两次点击,请求截图如下:

两次分别发出的请求

很明显,第一次的请求前面有个警告图标,说明请求有问题,在来看看请求详情:

请求头为空 请求头正常

对比一下就知道,第一个请求根本没法出去,直接被浏览器给“拦截”了。我找了下往上的原因,大意就是“IE6中a标签执行顺序引起这个问题,IE6中a标签执行onclick在执行默认事件(即href跳转)之前,当触发了绑定的事件之后,那么处理完事件之后,如果不return false或者阻止默认事件,则会继续执行href跳转,IE6会认为页面跳转到其他页面或者页面重新刷新,则abort之前onclick事件中的请求。”,那么解决办法也就很明显了,在a标签执行onclick后阻止默认行为就能轻松解决这个问题。


<a class="xjj0" href="javascript:void(0);" hidefocus="true"></a>

$('a').each(function(i){
$(this).click(function(event){

alert(1);


event.preventDefault(); //阻止默认事件
event.stopPropagation();   //阻止冒泡; (可以不加)

if(window._user!=undefined &&window._user.id!=-1){//登录
userLingj(window._user.id,i);

}else{//未登录
guaguaLR._run('l');
}

//return false;
});
});

按理说 根据IE6 a href onclick 执行顺序 ,ie6下没有阻止默认事件,不执行onclick事件的,但是,在这种情况下弹出alert(1);但是,关于后面的判断没有,即没有访问ajax.




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值