解读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 相关文章推荐
解javascript 混淆加密收藏
Jan 16 Javascript
一个tab标签切换效果代码
Mar 27 Javascript
基于JQuery实现异步刷新的代码(转载)
Mar 29 Javascript
ko knockoutjs动态属性绑定技巧应用
Nov 14 Javascript
javascript的push使用指南
Dec 05 Javascript
Jquery 垂直多级手风琴菜单附源码下载
Nov 17 Javascript
javascript中FOREACH数组方法使用示例
Mar 01 Javascript
微信小程序 WXML、WXSS 和JS介绍及详解
Oct 08 Javascript
bootstrap datetimepicker控件位置异常的解决方法
Nov 23 Javascript
图文详解vue框架安装步骤
Feb 12 Javascript
Vue3.0结合bootstrap创建多页面应用
May 28 Javascript
详解JavaScript中分解数字的三种方法
Jan 05 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
Http 1.1 Etag 与 Last-Modified提高php效率
2008/01/10 PHP
基于Linux调试工具strace与gdb的常用命令总结
2013/06/03 PHP
PHP 二维数组根据某个字段排序的具体实现
2014/06/03 PHP
10个php函数实用却不常见
2015/10/13 PHP
PHP中strcmp()和strcasecmp()函数字符串比较用法分析
2016/01/07 PHP
PHP时间处理类操作示例
2018/09/05 PHP
Sample script that displays all of the users in a given SQL Server DB
2007/06/16 Javascript
js window.onload 加载多个函数的方法
2009/11/02 Javascript
javascript面向对象包装类Class封装类库剖析
2013/01/24 Javascript
jquery等宽输出文字插件使用介绍
2013/09/18 Javascript
Select标签下拉列表二级联动级联实例代码
2014/02/07 Javascript
jQuery+php实时获取及响应文本框输入内容的方法
2016/05/24 Javascript
微信小程序 wx.request(object) API详解及实例代码
2016/09/30 Javascript
JavaScript自定义文本框光标
2017/03/05 Javascript
微信小程序实现滑动删除效果
2017/05/19 Javascript
javascript 日期相减-在线教程(附代码)
2017/08/17 Javascript
javascript面向对象三大特征之封装实例详解
2019/07/24 Javascript
浅析webpack-bundle-analyzer在vue-cli3中的使用
2019/10/23 Javascript
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法
2020/10/09 Javascript
编写同时兼容Python2.x与Python3.x版本的代码的几个示例
2015/03/30 Python
Python栈类实例分析
2015/06/15 Python
Python 用Redis简单实现分布式爬虫的方法
2017/11/23 Python
python检测文件夹变化,并拷贝有更新的文件到对应目录的方法
2018/10/17 Python
python实现AES和RSA加解密的方法
2019/03/28 Python
Pytorch反向求导更新网络参数的方法
2019/08/17 Python
基于Python把网站域名解析成ip地址
2020/05/25 Python
keras做CNN的训练误差loss的下降操作
2020/06/22 Python
利用简洁的图片预加载组件提升html5移动页面的用户体验
2016/03/11 HTML / CSS
耐克美国官网:Nike.com
2016/08/01 全球购物
大韩航空官方网站:Korean Air
2017/10/25 全球购物
Under Armour澳大利亚官网:美国知名的高端功能性运动品牌
2018/02/22 全球购物
nohup的用法
2012/11/26 面试题
社团成立邀请函
2014/01/08 职场文书
大学同学十年聚会感言
2014/02/21 职场文书
文员岗位职责
2015/02/04 职场文书
springboot @ConfigurationProperties和@PropertySource的区别
2021/06/11 Java/Android