解读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 相关文章推荐
讨论html与javascript在浏览器中的加载顺序问题
Nov 27 Javascript
js判断元素是否隐藏的方法
Jun 09 Javascript
jQuery实现table隔行换色和鼠标经过变色的两种方法
Jun 15 Javascript
JS判断页面是否出现滚动条的方法
Jul 17 Javascript
JS实现部分HTML固定页面顶部随屏滚动效果
Dec 24 Javascript
jQuery获取父元素节点、子元素节点及兄弟元素节点的方法
Apr 14 Javascript
Vue过滤器的用法和自定义过滤器使用
Feb 08 Javascript
webpack+vuex+axios 跨域请求数据的示例代码
Mar 06 Javascript
Vue 与 Vuex 的第一次接触遇到的坑
Aug 16 Javascript
vue.js中toast用法及使用toast弹框的实例代码
Aug 27 Javascript
解决Vue开发中对话框被遮罩层挡住的问题
Nov 26 Javascript
Webpack按需加载打包chunk命名的方法
Sep 22 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
超级实用的7个PHP代码片段分享
2012/01/05 PHP
php通过asort()给关联数组按照值排序的方法
2015/03/18 PHP
PHP中的类型约束介绍
2015/05/11 PHP
Smarty模板简单配置与使用方法示例
2016/05/23 PHP
PHP邮箱验证示例教程
2016/06/01 PHP
详解PHP中的外观模式facade pattern
2018/02/05 PHP
PHP+Ajax实现的检测用户名功能简单示例
2019/02/12 PHP
Jquery 滑入滑出效果实现代码
2010/03/27 Javascript
一个简单的jQuery插件制作 学习过程及实例
2010/04/25 Javascript
Javascript将string类型转换int类型
2010/12/09 Javascript
JQuery+EasyUI轻松实现步骤条效果
2016/02/22 Javascript
webpack3之loader全解析
2017/10/26 Javascript
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
2018/02/06 Javascript
微信小程序实现留言功能
2018/10/31 Javascript
简单说说如何使用vue-router插件的方法
2019/04/08 Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
2020/04/11 Javascript
Python的Django框架中的select_related函数对QuerySet 查询的优化
2015/04/01 Python
python安装PIL模块时Unable to find vcvarsall.bat错误的解决方法
2016/09/19 Python
解决Pandas to_json()中文乱码,转化为json数组的问题
2018/05/10 Python
一百行python代码将图片转成字符画
2021/02/19 Python
Python面向对象之类和对象实例详解
2018/12/10 Python
将pip源更换到国内镜像的详细步骤
2019/04/07 Python
对Python生成器、装饰器、递归的使用详解
2019/07/19 Python
Python人工智能之路 之PyAudio 实现录音 自动化交互实现问答
2019/08/13 Python
python实现LRU热点缓存及原理
2019/10/29 Python
Python利用 utf-8-sig 编码格式解决写入 csv 文件乱码问题
2020/02/21 Python
python数据预处理 :样本分布不均的解决(过采样和欠采样)
2020/02/29 Python
解析pip安装第三方库但PyCharm中却无法识别的问题及PyCharm安装第三方库的方法教程
2020/03/10 Python
在keras下实现多个模型的融合方式
2020/05/23 Python
奥地利领先的在线药房:SHOP APOTHEKE
2019/10/07 全球购物
有趣、实用和鼓舞人心的产品:Inspire Uplift
2019/11/05 全球购物
小车司机岗位职责
2013/11/25 职场文书
《桥》教学反思
2014/04/09 职场文书
民主生活会发言材料
2014/10/20 职场文书
Vue中使用import进行路由懒加载的原理分析
2022/04/01 Vue.js
pytest实现多进程与多线程运行超好用的插件
2022/07/15 Python