当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 解读IE和firefox下JScript和HREF的执行顺序

Javascript
XmlUtils JS操作XML工具类
jQuery animate效果演示
Jquery 设置标题的自动翻转
JQuery与Ajax常用代码实现对比
学习JS面向对象成果 借国庆发布个最新作品与大家交流
CSS 布局一个漂亮的滑块
兼容多浏览器的JS 浮动广告[推荐]
学习ExtJS(一) 之基础前提
学习ExtJS Column布局
jquery 最简单的属性菜单
有效的捕获JavaScript焦点的方法小结
js css样式操作代码(批量操作)
JS模拟的QQ面板上的多级可展开的菜单
jquery 框架使用教程 AJAX篇
css 有弹动效果的网页导航
jQuery语法总结和注意事项
用AJAX技术做Google Suggest效果
Javascript文档对象模型(DOM)实例分析
Javascript制作拖动网页布局的方法
Javascript解决IE6和FF的PNG图片兼容性问题

Javascript 中的 解读IE和firefox下JScript和HREF的执行顺序


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-12   浏览: 374 ::
收藏到网摘: n/a

很久都没有写关于代码方面的文章了。主要原因还是因为最近的工作都集中在需求分析方面,没有了现实中的感触,就没有了写作的动机。讨论一个关于JScript执行顺序的问题。示例代码如下:
a.htm
<A onmouseup="func('onmouseup')" href="b.htm">Click Me!</A> <A onclick="func2('onclick')" href="d.htm">Click Me!</A> <SPAN id=msg></SPAN>
<SCRIPT>
function func(str)
{
msg(str);
window.location.href="c.htm";
}
function msg(str)
{
document.getElementById("msg").innerText=str; //A
//alert(str); //B
}
function func2(str)
{
msg(str);
window.location.href="e.htm";
}
</SCRIPT>

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

A B
onmouseup onclick onmouseup onclick
IE b.htm d.htm c.htm d.htm
FireFox c.htm->b.htm e.htm->d.htm c.htm->b.htm e.htm->d.htm

上表主要列出了两个浏览器中的执行顺序,红色代表页面脚本跳转的页面,蓝色是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不被触发。

晕了。IE的确是个诡异的东西。谁能帮忙解释一下b例中的现象?