解读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学习(一)构建自己的JS库
Jan 02 Javascript
jquery实现预览提交的表单代码分享
May 21 Javascript
jQuery+ajax实现鼠标单击修改内容的方法
Jun 27 Javascript
JS将滑动门改为选项卡(需鼠标点击)的实现方法
Sep 27 Javascript
基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载
Jan 06 Javascript
Angular在一个页面中使用两个ng-app的方法
Feb 20 Javascript
Django与Vue语法的冲突问题完美解决方法
Dec 14 Javascript
详解jQuery中的getAll()和cleanData()
Apr 15 jQuery
js使用cookie实现记住用户名功能示例
Jun 13 Javascript
vue+elementui 对话框取消 表单验证重置示例
Oct 29 Javascript
Vue 同步异步存值取值实现案例
Aug 05 Javascript
vue elementUI批量上传文件
Apr 26 Vue.js
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
《猛禽小队》:DC宇宙的又一超级大烂片
2020/04/09 欧美动漫
example1.php
2006/10/09 PHP
Symfony页面的基本创建实例详解
2015/01/26 PHP
浅谈PHP的数据库接口和技术
2016/12/09 PHP
Symfony2针对输入时间进行查询的方法分析
2017/06/28 PHP
php数组遍历类与用法示例
2019/05/24 PHP
Thinkphp5.0框架使用模型Model的获取器、修改器、软删除数据操作示例
2019/10/11 PHP
laravel csrf排除路由,禁止,关闭指定路由的例子
2019/10/21 PHP
JXTree对象,读取外部xml文件数据,生成树的函数
2007/04/02 Javascript
使用JSLint提高JS代码质量方法分享
2013/12/16 Javascript
JavaScript数组的定义及数字操作技巧
2016/06/06 Javascript
jQuery实现鼠标跟随效果
2017/02/20 Javascript
node.js 中间件express-session使用详解
2017/05/20 Javascript
浅析Vue中method与computed的区别
2018/03/06 Javascript
webpack-mvc 传统多页面组件化开发详解
2019/05/07 Javascript
vue+egg+jwt实现登录验证的示例代码
2019/05/18 Javascript
node.js使用fs读取文件出错的解决方案
2019/10/23 Javascript
vue遍历生成的输入框 绑定及修改值示例
2019/10/30 Javascript
vue 解决文本框被键盘遮住的问题
2019/11/06 Javascript
js、jquery实现列表模糊搜索功能过程解析
2020/03/27 jQuery
详解Django通用视图中的函数包装
2015/07/21 Python
Python之re操作方法(详解)
2017/06/14 Python
Python实现发送与接收邮件的方法详解
2018/03/28 Python
Django 视图层(view)的使用
2018/11/09 Python
解决python多行注释引发缩进错误的问题
2019/08/23 Python
关于Python3爬虫利器Appium的安装步骤
2020/07/29 Python
美国领先的礼品卡网站:GiftCards.com
2016/11/02 全球购物
Mountain Warehouse德国官网:英国户外零售商
2019/08/11 全球购物
如何判断计算机可能已经中马
2013/03/22 面试题
解决方案设计综合面试题
2015/08/31 面试题
四下基层实施方案
2014/03/28 职场文书
机械设计专业大学生职业生涯规划书范文
2014/09/13 职场文书
2014三年级班主任工作总结
2014/12/05 职场文书
大队委员竞选稿
2015/11/20 职场文书
安全生产协议书
2016/03/22 职场文书
用Python提取PDF表格的方法
2021/04/11 Python