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


Posted in Javascript onJanuary 12, 2008

很久都没有写关于代码方面的文章了。主要原因还是因为最近的工作都集中在需求分析方面,没有了现实中的感触,就没有了写作的动机。讨论一个关于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例中的现象?

Javascript 相关文章推荐
编辑浪子版表单验证类
May 12 Javascript
javascript document.referrer 用法
Apr 30 Javascript
IE FF OPERA都可用的弹出层实现代码
Sep 29 Javascript
JavaScript动态改变div属性的实现方法
Jul 22 Javascript
JS hashMap实例详解
May 26 Javascript
浅谈js的url解析函数封装
Jun 28 Javascript
JSON与XML的区别对比及案例应用
Nov 11 Javascript
angularjs中ng-attr的用法详解
Dec 31 Javascript
js canvas实现放大镜查看图片功能
Jun 08 Javascript
jQuery动态移除与增加onclick属性的方法详解
Jun 07 jQuery
Vue.js图片预览插件使用详解
Aug 27 Javascript
使用vue-cli3+typescript的项目模板创建工程的教程
Feb 28 Javascript
img的onload的另类用法
Jan 10 #Javascript
javascript 点击整页变灰的效果(可做退出效果)。
Jan 09 #Javascript
js常见表单应用技巧
Jan 09 #Javascript
浏览器无法运行JAVA脚本的解决方法
Jan 09 #Javascript
js实现iframe动态调整高度的代码
Jan 06 #Javascript
创建一个复制UBB软件信息的链接或按钮的js代码
Jan 06 #Javascript
js jquery做的图片连续滚动代码
Jan 06 #Javascript
You might like
解析thinkphp的左右值无限分类
2013/06/20 PHP
PHP CURL获取返回值的方法
2014/05/04 PHP
php生成年月日下载列表的方法
2015/04/24 PHP
php微信公众号开发(4)php实现自定义关键字回复
2016/12/15 PHP
yii2.0整合阿里云oss上传单个文件的示例
2017/09/19 PHP
php微信公众号开发之音乐信息
2018/10/20 PHP
Laravel如何创建服务器提供者实例代码
2019/04/15 PHP
脚本吧 - 幻宇工作室用到js,超强推荐share.js
2006/12/23 Javascript
JavaScript入门教程(11) js事件处理
2009/01/31 Javascript
GWT中复制到剪贴板 js+flash实现复制 兼容性比较好
2010/03/07 Javascript
js 数据类型转换总结笔记
2011/01/17 Javascript
JQuery验证jsp页面属性是否为空(实例代码)
2013/11/08 Javascript
jquery实现ajax提交form表单的方法总结
2014/03/03 Javascript
解决Jquery向页面append新元素之后事件的绑定问题
2015/03/16 Javascript
详解JavaScript中shift()方法的使用
2015/06/09 Javascript
JS获取和修改元素样式的实例代码
2016/08/06 Javascript
JS解决position:sticky的兼容性问题的方法
2017/10/17 Javascript
Javacript中自定义的map.js  的方法
2017/11/26 Javascript
详解Vue结合后台的列表增删改案例
2018/08/21 Javascript
element-ui table span-method(行合并)的实现代码
2018/12/20 Javascript
JavaScript中使用Spread运算符的八种方法总结
2020/06/18 Javascript
python中的内置函数getattr()介绍及示例
2014/07/20 Python
Python多线程编程(七):使用Condition实现复杂同步
2015/04/05 Python
Python基于回溯法子集树模板解决m着色问题示例
2017/09/07 Python
python调用虹软2.0第三版的具体使用
2019/02/22 Python
关于Python字符串显示u...的解决方式
2020/03/06 Python
详解vscode实现远程linux服务器上Python开发
2020/11/10 Python
CSS3动画animation实现云彩向左滚动
2014/05/09 HTML / CSS
奥地利购买珠宝和手表网站:ELLA JUWELEN
2019/09/03 全球购物
荷兰网上药店:Drogisterij.net
2019/09/03 全球购物
如何实现jdbc性能优化
2012/07/30 面试题
老公保证书范文
2014/04/29 职场文书
给老婆的检讨书(搞笑版)
2015/05/06 职场文书
《学会看病》教学反思
2016/02/17 职场文书
golang elasticsearch Client的使用详解
2021/05/05 Golang
vue+springboot实现登录验证码
2021/05/27 Vue.js