解读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对象所有属性和方法的函数
Oct 16 Javascript
文本框中,回车键触发事件的js代码[多浏览器兼容]
Jun 07 Javascript
Js操作Select大全(取值、设置选中等等)
Oct 29 Javascript
JavaScript制作windows经典扫雷小游戏
Mar 31 Javascript
js+css实现的圆角边框TAB选项卡滑动门代码分享(2款)
Aug 26 Javascript
基于jquery实现轮播焦点图插件
Mar 31 Javascript
jquery获取下拉框中的循环值
Feb 08 Javascript
Bootstrap table简单使用总结
Feb 15 Javascript
微信小程序左滑删除效果的实现代码
Feb 20 Javascript
ES6 fetch函数与后台交互实现
Nov 14 Javascript
vue实现路由懒加载的3种方法示例
Sep 01 Javascript
详解webpack的clean-webpack-plugin插件报错
Oct 16 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采用get获取url汉字出现乱码的解决方法
2014/11/13 PHP
php 如何禁用eval() 函数实例详解
2016/12/01 PHP
ThinkPHP5与单元测试PHPUnit使用详解
2020/02/23 PHP
JS小功能(checkbox实现全选和全取消)实例代码
2013/11/28 Javascript
js+css实现的圆角边框TAB选项卡滑动门代码分享(2款)
2015/08/26 Javascript
JavaScript Length 属性的总结
2015/11/02 Javascript
jQuery插件学习教程之SlidesJs轮播+Validation验证
2016/07/12 Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
2016/07/28 Javascript
Vuejs第十篇之vuejs父子组件通信
2016/09/06 Javascript
vue.js 初体验之Chrome 插件开发实录
2017/05/13 Javascript
React实践之Tree组件的使用方法
2017/09/30 Javascript
使用Dropzone.js上传的示例代码
2017/10/10 Javascript
解决Angular.js中使用Swiper插件不能滑动的问题
2018/02/26 Javascript
angular.js实现列表orderby排序的方法
2018/10/02 Javascript
vue 父组件通过$refs获取子组件的值和方法详解
2019/11/07 Javascript
vue-cli3单页构建大型项目方案
2020/04/07 Javascript
[02:16]深扒TI7聊天轮盘语音出处2
2017/05/11 DOTA
python获取从命令行输入数字的方法
2015/04/29 Python
Python简单定义与使用字典dict的方法示例
2017/07/25 Python
Python3内置模块之json编解码方法小结【推荐】
2020/12/09 Python
Python函数参数匹配模型通用规则keyword-only参数详解
2019/06/10 Python
简单了解python高阶函数map/reduce
2019/06/28 Python
pycharm编写spark程序,导入pyspark包的3中实现方法
2019/08/02 Python
Python基于类路径字符串获取静态属性
2020/03/12 Python
python实现时间序列自相关图(acf)、偏自相关图(pacf)教程
2020/06/03 Python
python Matplotlib模块的使用
2020/09/16 Python
python实现暗通道去雾算法的示例
2020/09/27 Python
使用HTML5 Canvas API控制字体的显示与渲染的方法
2016/03/24 HTML / CSS
家乐福巴西网上超市:Carrefour巴西
2016/10/31 全球购物
中国包裹转运寄送国际服务:Famiboat
2019/07/24 全球购物
内容编辑个人求职信
2013/12/10 职场文书
赔偿协议书范本
2014/04/15 职场文书
产品生产计划书
2014/05/07 职场文书
党的群众路线教育实践活动整改落实情况报告
2014/10/28 职场文书
《我的美好婚事》动画化决定纪念插画与先导PV公开
2022/04/06 日漫
CentOS7环境下MySQL8常用命令小结
2022/06/10 Servers