解读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 相关文章推荐
transport.js和jquery冲突问题的解决方法
Feb 10 Javascript
chrome调试javascript详解
Oct 21 Javascript
实例详解angularjs和ajax的结合使用
Oct 22 Javascript
谈谈我对JavaScript中typeof和instanceof的深入理解
Dec 25 Javascript
Bootstrap实现下拉菜单效果
Apr 29 Javascript
echarts3 使用总结(绘制各种图表,地图)
Jan 05 Javascript
vue组件如何被其他项目引用
Apr 13 Javascript
基于vue2框架的机器人自动回复mini-project实例代码
Jun 13 Javascript
Vue2.0如何发布项目实战
Jul 27 Javascript
vue 封装自定义组件之tabal列表编辑单元格组件实例代码
Sep 07 Javascript
实例分析js事件循环机制
Dec 13 Javascript
Vue移动端实现图片上传及超过1M压缩上传
Dec 23 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同时连接多个mysql数据库示例代码
2014/03/17 PHP
php图片处理函数获取类型及扩展名实例
2014/11/19 PHP
用php守护另一个php进程的例子
2015/02/13 PHP
PHP开发中AJAX技术的简单应用
2015/12/11 PHP
CI框架数据库查询之join用法分析
2016/05/18 PHP
ExtJs之带图片的下拉列表框插件
2010/03/04 Javascript
jquery图片延迟加载 前端开发技能必备系列
2012/06/18 Javascript
如何使用jQuery来处理图片坏链具体实现步骤
2013/05/02 Javascript
js取消单选按钮选中示例代码
2013/11/14 Javascript
js实现通用的微信分享组件示例
2014/03/10 Javascript
JavaScript中数组的合并以及排序实现示例
2015/10/24 Javascript
jquery判断checkbox是否选中及改变checkbox状态的实现方法
2016/05/26 Javascript
jquery 正整数数字校验正则表达式
2017/01/10 Javascript
关于不同页面之间实现参数传递的几种方式讨论
2017/02/13 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(二)
2017/05/11 Javascript
Angular.js组件之input mask对input输入进行格式化详解
2017/07/10 Javascript
详解Vue中localstorage和sessionstorage的使用
2017/12/22 Javascript
vue 实现类似淘宝星级评分的示例
2018/03/01 Javascript
如何获取vue单文件自身源码路径
2019/05/06 Javascript
vue悬浮可拖拽悬浮按钮的实例代码
2019/08/20 Javascript
vue中的 $slot 获取插槽的节点实例
2019/11/12 Javascript
js实现弹窗猜数字游戏
2020/11/26 Javascript
利用python批量修改word文件名的方法示例
2017/10/17 Python
Python实现多进程共享数据的方法分析
2017/12/04 Python
Python+tkinter使用80行代码实现一个计算器实例
2018/01/16 Python
详解PyTorch批训练及优化器比较
2018/04/28 Python
django加载本地html的方法
2018/05/27 Python
Python 中的参数传递、返回值、浅拷贝、深拷贝
2019/06/25 Python
PyCharm GUI界面开发和exe文件生成的实现
2020/03/04 Python
Python利用matplotlib绘制折线图的新手教程
2020/11/05 Python
size?德国官方网站:英国伦敦的球鞋精品店
2018/03/17 全球购物
领导干部廉政自律承诺书
2014/05/26 职场文书
2014年教师党员公开承诺书
2014/05/28 职场文书
美德少年事迹材料500字
2014/08/19 职场文书
严以用权学习心得体会
2016/01/12 职场文书
分享mysql的current_timestamp小坑及解决
2021/11/27 MySQL