解读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创建平滑的页面滚动(顶部或底部)
Feb 26 Javascript
js使用ajax读博客rss示例
May 06 Javascript
js拼接html注意问题示例探讨
Jul 14 Javascript
js实现的牛顿摆效果
Mar 31 Javascript
去除字符串左右两边的空格(实现代码)
May 12 Javascript
JS基于递归实现倒计时效果的方法
Nov 26 Javascript
Vue中的v-cloak使用解读
Mar 27 Javascript
js脚本编写简单刷票投票系统
Jun 27 Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
Jul 13 Javascript
vue2.0 datepicker使用方法
Feb 04 Javascript
使用js和canvas实现时钟效果
Sep 08 Javascript
javascript实现放大镜功能
Dec 09 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
其他功能
2006/10/09 PHP
PHP编码规范之注释和文件结构说明
2010/07/09 PHP
window.open的功能全解析
2006/10/10 Javascript
再分享70+免费的jquery 图片滑块效果插件和教程
2014/12/15 Javascript
vue.js之vue-cli脚手架的搭建详解
2017/05/05 Javascript
BootStrap模态框不垂直居中的解决方法
2017/10/19 Javascript
微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能【附源码下载】
2017/12/09 Javascript
微信小程序实现MUI数字输入框效果
2018/01/31 Javascript
关于微信小程序bug记录与解决方法
2018/08/15 Javascript
koa-router源码学习小结
2018/09/07 Javascript
详解koa2学习中使用 async 、await、promise解决异步的问题
2018/11/13 Javascript
React父子组件间的传值的方法
2018/11/13 Javascript
Nodejs核心模块之net和http的使用详解
2019/04/02 NodeJs
[02:12]2015国际邀请赛 SHOWOPEN
2015/08/05 DOTA
[42:32]Secret vs Optic 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python的面向对象思想分析
2015/01/14 Python
详解python 字符串和日期之间转换 StringAndDate
2017/05/04 Python
详解Python核心编程中的浅拷贝与深拷贝
2018/01/07 Python
python实现银行实战系统
2020/02/26 Python
解决python执行较大excel文件openpyxl慢问题
2020/05/15 Python
python中什么是面向对象
2020/06/11 Python
CSS3中线性颜色渐变的一些实现方法
2015/07/14 HTML / CSS
美国体育用品在线:Modell’s Sporting Goods
2018/06/07 全球购物
LN-CC日本:高端男装和女装的奢侈时尚目的地
2019/09/01 全球购物
网络工程师个人的自我评价范文
2013/10/01 职场文书
满月酒答谢词
2014/01/14 职场文书
优秀教师先进事迹
2014/01/22 职场文书
如何写好优秀的创业计划书
2014/01/30 职场文书
煤矿机修工岗位职责
2014/02/07 职场文书
母婴店促销方案
2014/03/05 职场文书
建筑工地门卫岗位职责
2014/04/30 职场文书
我的中国梦口号
2014/06/16 职场文书
质量整改报告范文
2014/11/08 职场文书
小组组名及励志口号
2015/12/24 职场文书
PL350与SW11的比较
2021/04/22 无线电
PostgreSQL基于pgrouting的路径规划处理方法
2022/04/18 PostgreSQL