解读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 相关文章推荐
IE浏览器兼容Firefox的JS脚本的代码
Oct 23 Javascript
[Web]防止用户复制页面内容和另存页面的方法
Feb 06 Javascript
jQuery 下拉列表 二级联动插件分享
Mar 29 Javascript
一样的table?不一样的table(可编辑状态table)
Sep 19 Javascript
js获取日期:昨天今天和明天、后天
Jun 11 Javascript
JavaScript Math.ceil 方法(对数值向上取整)
Jan 09 Javascript
JS自动倒计时30秒后按钮才可用(两种场景)
Aug 31 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
Nov 06 Javascript
JavaScript基本类型值-Number类型
Feb 24 Javascript
详解Vue 实例中的生命周期钩子
Mar 21 Javascript
深入理解Node module模块
Mar 26 Javascript
微信小程序单选radio及多选checkbox按钮用法示例
Apr 30 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 Mysql日期和时间函数集合
2007/11/16 PHP
php session 预定义数组
2009/03/16 PHP
php显示指定目录下子目录的方法
2015/03/20 PHP
PHP抓取远程图片(含不带后缀的)教程详解
2016/10/21 PHP
浅谈htmlentities 、htmlspecialchars、addslashes的使用方法
2016/12/09 PHP
音乐播放用的的几个函数
2006/09/07 Javascript
JavaScript Array对象扩展indexOf()方法
2014/05/09 Javascript
javaScript基础语法介绍
2015/02/28 Javascript
简介JavaScript中valueOf()方法的使用
2015/06/05 Javascript
JavaScript实现的Tween算法及缓冲特效实例代码
2015/11/03 Javascript
使用jquery.qrcode.min.js实现中文转化二维码
2016/03/11 Javascript
Backbone中View之间传值的学习心得
2016/08/09 Javascript
jQuery实现表格文本框淡入更改值后淡出效果
2016/09/27 Javascript
jquery二级目录选中当前页的css样式
2016/12/08 Javascript
js自定义Tab选项卡效果
2017/06/05 Javascript
JS实现图片放大镜插件详解
2017/11/06 Javascript
vue项目中v-model父子组件通信的实现详解
2017/12/10 Javascript
微信小程序表单验证form提交错误提示效果
2020/06/19 Javascript
JavaScript读写二进制数据的方法详解
2018/09/09 Javascript
使用typescript改造koa开发框架的实现
2020/02/04 Javascript
原生js实现俄罗斯方块
2020/10/20 Javascript
python应用程序在windows下不出现cmd窗口的办法
2014/05/29 Python
python概率计算器实例分析
2015/03/25 Python
python分析网页上所有超链接的方法
2015/05/08 Python
python写日志封装类实例
2015/06/28 Python
python获取点击的坐标画图形的方法
2019/07/09 Python
django 通过URL访问上传的文件方法
2019/07/28 Python
django组合搜索实现过程详解(附代码)
2019/08/06 Python
python进度条显示之tqmd模块
2020/08/22 Python
解决Python3.8运行tornado项目报NotImplementedError错误
2020/09/02 Python
css3实现3D文本悬停改变效果的示例代码
2019/01/16 HTML / CSS
Otticanet英国:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/02/10 全球购物
成考报名单位证明范本
2014/01/16 职场文书
爱心捐赠活动简讯
2015/07/20 职场文书
为什么 Nginx 比 Apache 更牛逼
2021/03/31 Servers
用python实现监控视频人数统计
2021/05/21 Python