解读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 相关文章推荐
JSQL SQLProxy 的 php 版本代码
May 05 Javascript
统计出现最多的字符次数的js代码
Dec 03 Javascript
JQuery 应用 JQuery.groupTable.js
Dec 15 Javascript
Jquery为a标签的href赋值实现代码
May 03 Javascript
jQuery截取指定长度字符串的实现原理及代码
Jul 01 Javascript
简单分析javascript面向对象与原型
May 21 Javascript
郁闷!ionic中获取ng-model绑定的值为undefined如何解决
Aug 27 Javascript
浅谈js script标签中的预解析
Dec 30 Javascript
详解Vue2中组件间通信的解决全方案
Jul 28 Javascript
基于javascript中的typeof和类型判断(详解)
Oct 27 Javascript
JavaScript中click和onclick本质区别与用法分析
Jun 07 Javascript
vue自定义组件(通过Vue.use()来使用)即install的用法说明
Aug 11 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
PHP网上调查系统
2006/10/09 PHP
PHP 八种基本的数据类型小结
2011/06/01 PHP
PHP实现的带超时功能get_headers函数
2015/02/10 PHP
ThinkPHP开发框架函数详解:C方法
2015/08/14 PHP
javascript检查日期格式的函数[比较全]
2008/10/17 Javascript
Asp.net下使用Jquery Ajax传送和接收DataTable的代码
2010/09/12 Javascript
jQuery Ajax使用 全解析
2010/12/15 Javascript
jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码
2013/01/23 Javascript
Javascript之this关键字深入解析
2013/11/12 Javascript
直接在JS里创建JSON数据然后遍历使用
2014/07/25 Javascript
jQuery控制DIV层实现由大到小,由远及近动画变化效果
2015/10/09 Javascript
jQuery实现鼠标选文字发新浪微博的方法
2016/04/02 Javascript
设计模式中的组合模式在JavaScript程序构建中的使用
2016/05/18 Javascript
微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】
2017/12/09 Javascript
使用vue-cli编写vue插件的方法
2018/02/26 Javascript
[05:46]2018完美盛典-《同梦共竞》
2018/12/17 DOTA
简介Python设计模式中的代理模式与模板方法模式编程
2016/02/02 Python
Pandas实现数据类型转换的一些小技巧汇总
2018/05/07 Python
Python实现的序列化和反序列化二叉树算法示例
2019/03/02 Python
django将网络中的图片,保存成model中的ImageField的实例
2019/08/07 Python
python中判断文件结束符的具体方法
2020/08/04 Python
详解python中的闭包
2020/09/07 Python
python实现图片转字符画的完整代码
2021/02/21 Python
马来西亚在线购物:POPLOOK.com
2019/12/09 全球购物
医大实习自我鉴定
2013/12/07 职场文书
会计专业自我鉴定
2014/02/10 职场文书
物理研修随笔感言
2014/02/14 职场文书
产假请假条
2014/04/10 职场文书
企业标语大全
2014/07/01 职场文书
2015年考研复习计划
2015/01/19 职场文书
2015年新农合工作总结
2015/03/30 职场文书
幼儿园春季开学通知
2015/07/16 职场文书
《卧薪尝胆》读后感3篇
2019/12/26 职场文书
详解RedisTemplate下Redis分布式锁引发的系列问题
2021/04/27 Redis
提取视频中的音频 Python只需要三行代码!
2021/05/10 Python
《王者天下》第4季首话新剧照 4月9日正式开播
2022/04/07 日漫