解读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 相关文章推荐
如何实现移动端浏览器不显示 pc 端的广告
Oct 15 Javascript
JavaScript学习笔记之数组求和方法
Mar 23 Javascript
Angular Module声明和获取重载实例代码
Sep 14 Javascript
使用vue构建移动应用实战代码
Aug 02 Javascript
Bootstrap栅格系统的使用详解
Oct 30 Javascript
react.js组件实现拖拽复制和可排序的示例代码
Aug 20 Javascript
在JS循环中使用async/await的方法
Oct 12 Javascript
vue基于两个计算属性实现选中和全选功能示例
Feb 08 Javascript
微信小程序实现卡片层叠滑动效果
Jun 21 Javascript
微信小程序中如何使用flyio封装网络请求
Jul 03 Javascript
JS函数基本定义与用法示例
Jan 15 Javascript
在webstorm中配置less的方法详解
Sep 25 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
phpstrom使用xdebug配置方法
2013/12/17 PHP
ThinkPHP中pathinfo的访问模式、路径访问模式及URL重写总结
2014/08/23 PHP
Jquery 弹出层插件实现代码
2009/10/24 Javascript
jquery 多行文本框(textarea)高度变化
2013/07/03 Javascript
js中settimeout方法加参数
2014/02/28 Javascript
checkbox选中与未选中判断示例
2014/08/04 Javascript
Javascript获取CSS伪元素属性的实现代码
2014/09/28 Javascript
Boostrap模态窗口的学习小结
2016/03/28 Javascript
js获取所有checkbox的值的简单实例
2016/05/30 Javascript
Angular中$cacheFactory的作用和用法实例详解
2016/08/19 Javascript
sublime text配置node.js调试(图文教程)
2017/11/23 Javascript
vue 文件目录结构详解
2017/11/24 Javascript
nodejs 最新版安装npm 的使用详解
2018/01/18 NodeJs
react-native-video实现视频全屏播放的方法
2018/03/19 Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
2019/05/06 Javascript
微信小程序 可搜索的地址选择实现详解
2019/08/28 Javascript
JavaScript事件冒泡机制原理实例解析
2020/01/14 Javascript
WEB前端性能优化的7大手段详解
2020/02/04 Javascript
[47:21]Liquid vs TNC Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
推荐下python/ironpython:从入门到精通
2007/10/02 Python
Python OpenCV获取视频的方法
2018/02/28 Python
python flask中静态文件的管理方法
2018/03/20 Python
Python使用pip安装pySerial串口通讯模块
2018/04/20 Python
详解用TensorFlow实现逻辑回归算法
2018/05/02 Python
三个python爬虫项目实例代码
2019/12/28 Python
HTTP状态码详解
2021/03/18 杂记
Speedo澳大利亚官网:全球领先游泳品牌
2018/02/04 全球购物
餐厅执行经理岗位职责范本
2014/02/26 职场文书
公司经理聘任书
2014/03/29 职场文书
《学会合作》教学反思
2014/04/12 职场文书
运动会口号16字
2014/06/07 职场文书
三提三创主题教育活动查摆整改措施
2014/10/25 职场文书
婚内分居协议书范文
2014/11/26 职场文书
Python深度学习之Pytorch初步使用
2021/05/20 Python
IDEA中sout快捷键无效问题的解决方法
2022/07/23 Java/Android