解读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 相关文章推荐
优化Node.js Web应用运行速度的10个技巧
Sep 03 Javascript
javascript中Date对象的getDay方法使用指南
Dec 22 Javascript
jquery+easeing实现仿flash的载入动画
Mar 10 Javascript
Node.js中防止错误导致的进程阻塞的方法
Aug 11 Javascript
IE8兼容Jquery.validate.js的问题
Dec 01 Javascript
AngularJS对动态增加的DOM实现ng-keyup事件示例
Mar 12 Javascript
Vue props用法详解(小结)
Jul 03 Javascript
从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法
Sep 18 Javascript
原生JS利用transform实现banner的无限滚动示例代码
Jun 15 Javascript
再也不怕 JavaScript 报错了,怎么看怎么处理都在这儿
Dec 09 Javascript
React配置子路由的实现
Jun 03 Javascript
React自定义hook的方法
Jun 25 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 array_flip() 删除重复数组元素专用函数
2010/05/16 PHP
解析PHP中的unset究竟会不会释放内存
2013/07/18 PHP
CentOS 6.3下安装PHP xcache扩展模块笔记
2014/09/10 PHP
php json_encode()函数返回json数据实例代码
2014/10/10 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
PHP观察者模式定义与用法实例分析
2019/03/22 PHP
PHP观察者模式实例分析【对比JS观察者模式】
2019/05/22 PHP
javasciprt下jquery函数$.post执行无响应的解决方法
2014/03/13 Javascript
如何实现JavaScript动态加载CSS和JS文件
2020/12/28 Javascript
关于input全选反选恶心的异常情况
2016/07/24 Javascript
jQuery操作json常用方法示例
2017/01/04 Javascript
微信小程序开发教程-手势解锁实例
2017/01/06 Javascript
浅谈JS封闭函数、闭包、内置对象
2017/07/18 Javascript
VueJS组件之间通过props交互及验证的方式
2017/09/04 Javascript
React + webpack 环境配置的方法步骤
2017/09/07 Javascript
js实现关闭网页出现是否离开提示
2017/12/07 Javascript
vue-router之nuxt动态路由设置的两种方法小结
2018/09/26 Javascript
Element Card 卡片的具体使用
2020/07/26 Javascript
Python利用Beautiful Soup模块搜索内容详解
2017/03/29 Python
对python内置map和six.moves.map的区别详解
2018/12/19 Python
seek引发的python文件读写的问题及解决
2019/07/26 Python
python 检查数据中是否有缺失值,删除缺失值的方式
2019/12/02 Python
Python pandas 列转行操作详解(类似hive中explode方法)
2020/05/18 Python
python如何输出反斜杠
2020/06/18 Python
莱德杯高尔夫欧洲官方商店:Ryder Cup Shop
2019/08/14 全球购物
长曲棍球装备:Lacrosse Monkey
2020/12/02 全球购物
英国健身专家:WIT Fitness
2021/02/09 全球购物
MIS软件工程师的面试题
2016/04/22 面试题
大学军训感言300字
2014/03/09 职场文书
成品库仓管员岗位职责
2014/04/06 职场文书
新春寄语大全
2014/04/09 职场文书
红旗渠导游词
2015/02/09 职场文书
投资入股协议书
2016/03/22 职场文书
2019开业庆典剪彩仪式主持词!
2019/07/22 职场文书
创业计划书之面包店
2019/09/17 职场文书
goland 恢复已更改文件的操作
2021/04/28 Golang