解读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 相关文章推荐
JavaScript 中的replace方法说明
Apr 13 Javascript
js原生态函数中使用jQuery中的 $(this)无效的解决方法
May 25 Javascript
jquery监听div内容的变化具体实现思路
Nov 04 Javascript
JS实现具备延时功能的滑动门菜单效果
Sep 17 Javascript
基于OL2实现百度地图ABCD marker的效果
Oct 01 Javascript
详解vue.js组件化开发实践
Dec 14 Javascript
canvas实现图像放大镜
Feb 06 Javascript
Jil,高效的json序列化和反序列化库
Feb 15 Javascript
JS中this的指向以及call、apply的作用
May 06 Javascript
Bootstrap Table实现定时刷新数据的方法
Aug 13 Javascript
微信小程序之左右布局的实现代码
Dec 13 Javascript
vue在线动态切换主题色方案
Mar 26 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错误信息方法的详解
2013/06/09 PHP
php生成短域名函数
2015/03/23 PHP
PHP反射API示例分享
2016/10/08 PHP
PHP 7.1新特性的汇总介绍
2016/12/16 PHP
php回调函数处理数组操作示例
2020/04/13 PHP
jquery UI 1.72 之datepicker
2009/12/29 Javascript
YUI Compressor压缩JavaScript原理及微优化
2013/01/07 Javascript
js解析与序列化json数据(一)json.stringify()的基本用法
2013/02/01 Javascript
Javascript alert消息换行的方法
2013/08/07 Javascript
判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
2013/11/07 Javascript
javascript 函数及作用域总结介绍
2013/11/12 Javascript
深入分析javascript中的错误处理机制
2016/07/17 Javascript
Web纯前端“旭日图”实现元素周期表
2017/03/10 Javascript
微信小程序 scroll-view实现锚点滑动的示例
2017/12/06 Javascript
JS抛物线动画实例制作
2018/02/24 Javascript
checkbox在vue中的用法小结
2018/11/13 Javascript
vuex页面刷新后数据丢失的方法
2019/01/17 Javascript
微信小程序12行js代码自己写个滑块功能(推荐)
2020/07/15 Javascript
Nuxt pages下不同的页面对应layout下的页面布局操作
2020/11/05 Javascript
python中迭代器(iterator)用法实例分析
2015/04/29 Python
在Linux系统上通过uWSGI配置Nginx+Python环境的教程
2015/12/25 Python
在Python中通过threading模块定义和调用线程的方法
2016/07/12 Python
pytorch 使用单个GPU与多个GPU进行训练与测试的方法
2019/08/19 Python
python列表推导式操作解析
2019/11/26 Python
浅谈Html5移动端ios/Android兼容性总结
2018/06/01 HTML / CSS
Speedo速比涛德国官方网站:世界领先的泳装品牌
2019/08/26 全球购物
ajax是什么及其工作原理
2012/02/08 面试题
工程造价专业大学生职业生涯规划书
2014/01/18 职场文书
授权委托书(法人单位用)
2014/09/29 职场文书
八项规定自查自纠报告及整改措施
2014/10/26 职场文书
微信搭讪开场白
2015/05/28 职场文书
英文投诉信格式
2015/07/03 职场文书
2016年中学端午节主题活动总结
2016/04/01 职场文书
Python Django 后台管理之后台模型属性详解
2021/04/25 Python
JavaScript 中for/of,for/in 的详细介绍
2021/11/17 Javascript