解读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 相关文章推荐
js技巧--转义符&quot;\&quot;的妙用
Jan 09 Javascript
Z-Blog中用到的js代码
Mar 15 Javascript
JavaScript 常见对象类创建代码与优缺点分析
Dec 07 Javascript
js 输出内容到新窗口具体实现代码
May 31 Javascript
JS OffsetParent属性深入解析
Jan 13 Javascript
javascript的函数作用域
Nov 12 Javascript
jQuery Easyui 验证两次密码输入是否相等
May 13 Javascript
jQuery拖拽通过八个点改变div大小
Nov 29 Javascript
vue移动端UI框架实现QQ侧边菜单组件
Mar 09 Javascript
vue项目前端埋点的实现
Mar 06 Javascript
webpack自动打包和热更新的实现方法
Jun 24 Javascript
vue-cli3.X快速创建项目的方法步骤
Nov 14 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连接access数据库
2008/03/27 PHP
PHP实现提取一个图像文件并在浏览器上显示的代码
2012/10/06 PHP
PHP数组无限分级数据的层级化处理代码
2012/12/29 PHP
php实现上传图片文件代码
2015/07/19 PHP
Javascript 中的 &amp;&amp; 和 || 使用小结
2010/04/25 Javascript
JavaScript实现拼音排序的方法
2012/11/20 Javascript
ie6下png图片背景不透明的解决办法使用js实现
2013/01/11 Javascript
jQuery链式操作如何实现以及为什么要用链式操作
2013/01/17 Javascript
NodeJS与Mysql的交互示例代码
2013/08/18 NodeJs
使用jsonp完美解决跨域问题
2014/11/27 Javascript
JavaScript实现cookie的写入、读取、删除功能
2015/11/05 Javascript
js实现的二分查找算法实例
2016/01/21 Javascript
原生js仿jquery animate动画效果
2016/07/13 Javascript
js Canvas实现圆形时钟教程
2016/09/19 Javascript
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
2020/08/09 Javascript
React-Native之定时器Timer的实现代码
2017/10/04 Javascript
JavaScript中toLocaleString()和toString()的区别实例分析
2018/08/14 Javascript
微信小程序如何获取群聊的openGid以及名称详解
2019/07/17 Javascript
vue-next/runtime-core 源码阅读指南详解
2019/10/25 Javascript
Jquery让form表单异步提交代码实现
2019/11/14 jQuery
[00:49]完美世界DOTA2联赛10月28日开团时刻:随便打
2020/10/29 DOTA
wxPython框架类和面板类的使用实例
2014/09/28 Python
Centos7 Python3下安装scrapy的详细步骤
2018/03/15 Python
用TensorFlow实现多类支持向量机的示例代码
2018/04/28 Python
python sort、sort_index方法代码实例
2019/03/28 Python
Python使用Slider组件实现调整曲线参数功能示例
2019/09/06 Python
浅谈keras 的抽象后端(from keras import backend as K)
2020/06/16 Python
python 图像增强算法实现详解
2021/01/24 Python
导游个人求职信范文
2014/03/23 职场文书
2014年学校法制宣传日活动总结
2014/11/01 职场文书
淮海战役观后感
2015/06/11 职场文书
我的中国梦心得体会范文
2016/01/05 职场文书
2019年度开业庆典祝福语大全!
2019/07/05 职场文书
python 定义函数 返回值只取其中一个的实现
2021/05/21 Python
MySQ InnoDB和MyISAM存储引擎介绍
2022/04/26 MySQL