解读IE和firefox下JScript和HREF的执行顺序

 更新时间:2008年01月12日 15:08:43   作者:  
解读IE和firefox下JScript和HREF的执行顺序

很久都没有写关于代码方面的文章了。主要原因还是因为最近的工作都集中在需求分析方面,没有了现实中的感触,就没有了写作的动机。讨论一个关于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例中的现象?

相关文章

  • js a标签点击事件

    js a标签点击事件

    本文将详细介绍a标签上的点击事件的相关知识。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-03-03
  • JavaScript 检测文件的类型的方法

    JavaScript 检测文件的类型的方法

    在日常工作中,文件上传是一个很常见的功能。在某些情况下,我们希望能限制文件上传的类型,比如限制只能上传 PNG 格式的图片。本文就将针对这个问题,来讲解如何检测文件的类型
    2021-05-05
  • JS 组件系列之BootstrapTable的treegrid功能

    JS 组件系列之BootstrapTable的treegrid功能

    这篇文章主要介绍了JS 组件系列之BootstrapTable的treegrid功能,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-06-06
  • JS实现电商商品展示放大镜特效

    JS实现电商商品展示放大镜特效

    这篇文章主要为大家详细介绍了JS实现电商商品展示放大镜特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-01-01
  • web前端页面生成exe可执行文件的方法

    web前端页面生成exe可执行文件的方法

    这篇文章给大家介绍了Electron 怎么将网页打包成桌面应用(web前端页面怎么生成exe可执行文件),感兴趣的朋友跟随脚本之家小编一起学习吧
    2018-02-02
  • echarts饼图labelLine线的长度自适应设置

    echarts饼图labelLine线的长度自适应设置

    这篇文章主要给大家介绍了关于echarts饼图labelLine线的长度自适应设置的相关资料,在echarts中,饼图的标签线可以通过设置 labelLine属性来自定义位置,需要的朋友可以参考下
    2023-08-08
  • CSS+Js遮罩效果的TAB及焦点图片切换(推荐)

    CSS+Js遮罩效果的TAB及焦点图片切换(推荐)

    CSS+Js图片切换技术,类似的已有不少了,这一个使用了遮罩过渡的效果,同样应用到了TAB选项卡上,本页面仅是为了演示,大家用时候把它拆分开来,这个效果也对学习图片效果制作很有帮助。
    2009-11-11
  • 细说JavaScript中的变量,作用域和垃圾回收

    细说JavaScript中的变量,作用域和垃圾回收

    这篇文章主要和大家介绍一下JavaScript中的变量,作用域和垃圾回收的定义与使用,文中的示例代码讲解详细,对我们学习JavaScript有一定的帮助,需要的可以参考一下
    2022-11-11
  • 关于uniapp的request封装保姆级教程

    关于uniapp的request封装保姆级教程

    这篇文章主要给大家介绍了关于uniapp的request封装保姆级教程,request是基于uni-app框架封装的一个网络请求库,可以用于发送http请求和处理响应数据,需要的朋友可以参考下
    2023-07-07
  • 用js怎么把&字符换成"&amp:"

    用js怎么把&字符换成"&amp:"

    用js怎么把&字符换成"&amp:"...
    2006-10-10

最新评论