解读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 相关文章推荐
jQuery 连续列表实现代码
Dec 21 Javascript
扩展JavaScript功能的正确方法(译文)
Apr 12 Javascript
使用javascript做的一个随机点名程序
Feb 13 Javascript
JS遍历数组及打印数组实例分析
Jan 21 Javascript
BOM系列第一篇之定时器setTimeout和setInterval
Aug 17 Javascript
JS实现兼容火狐及IE iframe onload属性的遮罩层隐藏及显示效果
Aug 23 Javascript
JS实现字符串转驼峰格式的方法
Dec 16 Javascript
Vuex 使用及简单实例(计数器)
Aug 29 Javascript
vue-cli3使用 DllPlugin 实现预编译提升构建速度
Apr 24 Javascript
详解js常用分割取字符串的方法
May 15 Javascript
vue实现pdf文档在线预览功能
Nov 26 Javascript
如何在Vue.JS中使用图标组件
Aug 04 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删除数组元素示例分享
2014/02/17 PHP
PHP实现仿Google分页效果的分页函数
2015/07/29 PHP
PHP模板引擎Smarty内建函数foreach,foreachelse用法分析
2016/04/11 PHP
PHP数组访问常用方法解析
2020/09/05 PHP
在IE下:float属性会影响offsetTop的取值
2006/12/22 Javascript
js关于getImageData跨域问题的解决方法
2016/10/14 Javascript
Javascript基础回顾之(二) js作用域
2017/01/31 Javascript
从零学习node.js之详解异步控制工具async(八)
2017/02/27 Javascript
Node+Express+MongoDB实现登录注册功能实例
2017/04/23 Javascript
bootstrap table实现点击翻页功能 可记录上下页选中的行
2017/09/28 Javascript
用最少的JS代码写出贪吃蛇游戏
2018/01/12 Javascript
jQuery操作attr、prop、val()/text()/html()、class属性
2019/05/23 jQuery
微信小程序自定义底部弹出框功能
2020/11/18 Javascript
[59:48]DOTA2-DPC中国联赛 正赛 VG vs Magma BO3 第一场 1月26日
2021/03/11 DOTA
pyenv命令管理多个Python版本
2017/03/26 Python
Python + selenium + requests实现12306全自动抢票及验证码破解加自动点击功能
2018/11/23 Python
详解python解压压缩包的五种方法
2019/07/05 Python
使用python的pyplot绘制函数实例
2020/02/13 Python
python爬虫使用requests发送post请求示例详解
2020/08/05 Python
解决Pyinstaller打包软件失败的一个坑
2021/03/04 Python
CSS3标注引用的出处和来源的方法
2020/02/25 HTML / CSS
HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
2013/04/25 HTML / CSS
HTML5的hidden属性兼容老浏览器的方法
2014/04/23 HTML / CSS
南京某公司笔试题
2013/01/27 面试题
自动化专业个人求职信范文
2013/11/29 职场文书
农民致富事迹材料
2014/01/23 职场文书
总经理助理的职责
2014/03/14 职场文书
初中家长评语大全
2014/12/26 职场文书
新郎新娘答谢词
2015/01/04 职场文书
工作保证书怎么写
2015/02/28 职场文书
自主招生学校推荐信范文
2015/03/26 职场文书
班级管理经验交流材料
2015/11/02 职场文书
python基础之爬虫入门
2021/05/10 Python
nginx作grpc的反向代理踩坑总结
2021/07/07 Servers
使用opencv-python如何打开USB或者笔记本前置摄像头
2022/06/21 Python
Python docx库删除复制paragraph及行高设置图片插入示例
2022/07/23 Python