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);' onclick='_gotoPage(url_go , 2, 10)' >")下一页</a>
IE6下上面的onclick事件不会被响应，换成下面的就OK了，加上return false

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

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

第二篇 脚本之家的转摘：/article/1261006.html

<a onmouseup="func('onmouseup')" href="b.html">Click Me!</a>

<a onclick="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。

	A	B
onmouseup	onclick	onmouseup	onclick
IE	b.html	d.html	b.html	d.html
FireFox	c.html	e.html	c.html	e.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" onclick="return false;">Click Me!</a>

发现HREF不能被执行。

b. 如果我们使用以下测试代码：

<a href="d.htm" onclick="window.location.href='e.htm';return false;">Click Me!</a>

发现依旧执行HREF的d.htm，而不是onclick中的e.htm。

c. 如果我们使用以下测试代码：

<a href="d.htm" onclick="msg('onclick');return false;">Click Me!</a>（ function msg()的代码如上）

发现执行了function msg()，而HREF不被触发。

d. 如果我们使用以下测试代码：

<<a href="d.html" onmouseup="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.