解读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中有关IE版本检测
Jan 04 Javascript
js鼠标及对象坐标控制属性详细解析
Dec 14 Javascript
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
May 25 Javascript
基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载
Jan 06 Javascript
Node.js中Request模块处理HTTP协议请求的基本使用教程
Mar 31 Javascript
Bootstrap3制作自己的导航栏
May 12 Javascript
Vue实现侧边菜单栏手风琴效果实例代码
May 31 Javascript
vue生成token并保存到本地存储中
Jul 17 Javascript
30分钟精通React今年最劲爆的新特性——React Hooks
Mar 11 Javascript
NestJs 静态目录配置详解
Mar 12 Javascript
vue接通后端api以及部署到服务器操作
Aug 13 Javascript
vue如何使用rem适配
Feb 06 Vue.js
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代码包装修正版
2008/03/15 PHP
php与paypal整合方法
2010/11/28 PHP
php计算几分钟前、几小时前、几天前的几个函数、类分享
2014/04/09 PHP
解读PHP中的垃圾回收机制
2015/08/10 PHP
如何使用微信公众平台开发模式实现多客服
2016/01/06 PHP
PHP根据session与cookie用户登录状态操作类的代码
2016/05/13 PHP
php pdo oracle中文乱码的快速解决方法
2016/05/16 PHP
php禁用函数设置及查看方法详解
2016/07/25 PHP
php实现简单的权限管理的示例代码
2017/08/25 PHP
ExtJS 2.0实用简明教程 之Border区域布局
2009/04/29 Javascript
Jquery常用技巧收集整理篇
2010/11/14 Javascript
JS取文本框中最小值的简单实例
2013/11/29 Javascript
JS实现关键字搜索时的相关下拉字段效果
2014/08/05 Javascript
jquery中attr、prop、data区别与用法分析
2019/09/25 jQuery
python使用htmllib分析网页内容的方法
2015/05/08 Python
对于Python装饰器使用的一些建议
2015/06/03 Python
Python获取某一天是星期几的方法示例
2017/01/17 Python
100行Python代码实现自动抢火车票(附源码)
2018/01/11 Python
运行django项目指定IP和端口的方法
2018/05/14 Python
python实现超级玛丽游戏
2020/03/18 Python
Python引入多个模块及包的概念过程解析
2020/09/21 Python
Python结合百度语音识别实现实时翻译软件的实现
2021/01/18 Python
Python中对象的比较操作==和is区别详析
2021/02/12 Python
使用纯 CSS 创作一个脉动 loader效果的源码
2018/09/28 HTML / CSS
澳大利亚一站式数码相机商店:CameraPro
2020/03/09 全球购物
大学生专业个人学习的自我评价
2013/10/26 职场文书
给排水工程师岗位职责
2013/11/21 职场文书
初中生期末考试的自我评价
2013/12/17 职场文书
蓝颜请假条
2014/04/11 职场文书
大队干部竞选演讲稿
2014/04/28 职场文书
社区义诊活动总结
2014/04/30 职场文书
保证书格式
2015/01/16 职场文书
赡养老人协议书范本
2015/08/06 职场文书
2016反腐倡廉警示教育心得体会
2016/01/13 职场文书
试用1103暨1103、1101同门大比武 [ DAIWEI ]
2022/04/05 无线电
Win11无法访问设备和打印机 如何解决页面空白
2022/04/09 数码科技