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

2016-02-19 08:55 5 1 收藏

下面这个解读IE和firefox下JScript和HREF的执行顺序教程由图老师小编精心推荐选出,过程简单易学超容易上手,喜欢就要赶紧get起来哦!

【 tulaoshi.com - Web开发 】

很久都没有写关于代码方面的文章了。主要原因还是因为最近的工作都集中在需求分析方面,没有了现实中的感触,就没有了写作的动机。讨论一个关于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 onmouseuponclick  IE b.htm d.htm c.htmd.htm  FireFox c.htm-b.htm e.htm-d.htm c.htm-b.htme.htm-d.htm 

上表主要列出了两个浏览器中的执行顺序,红色代表页面脚本跳转的页面,蓝色是Anchor标签的href属性。从上面可以看出,对于FireFox,始终先执行页面脚本,然后浏览器再跳转。而IE里面执行的过程却有差别:
1、使用后退按钮直接回到a.htm,即页面只执行了一个跳转;
2、在使用alert中断的情况下,onmouseup执行了页面脚本中的跳转。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

从上可以看出,
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不被触发。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

晕了。IE的确是个诡异的东西。谁能帮忙解释一下b例中的现象?

来源:http://www.tulaoshi.com/n/20160219/1588863.html

延伸阅读
标签: Web开发
IE vs FF CSS 兼容要点: DOCTYPE 影响 CSS 处理 FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行 FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-...
标签: Web开发
区别IE6与FF: background:orange;*background:blue; 区别IE6与IE7: background:green !important;background:blue; 区别IE7与FF: background:orange; *background:green; 区别FF,IE7,IE6: background:orange;*background:green !important;*background:blue; 注:IE都能识别*;标准浏览器(如FF)不能识别*; IE6能识别*,但不能识别 ...
标签: Web开发
支付宝UED的制作了一个Firefox插件,它可以用来快速实时编辑网页代码,快速基于Firefox制作Demo页面,方便的编辑修改CSS Sprite,以及配合Fiddler调试页面,是一个很不错的前端开发助手。 Firefox版本 该插件基于Firebug,所以安装前请确保已经安装Firebug。 一些主要特性; 即时编辑即改即现,把Firefox打造成超强网页编辑器; 与Fiddl...
标签: Web开发
1.最开始web上只有静态的html 2.为了满足更好的交互需求,netscape开发了在Navigator中使用的LiveScript语言,后改名为JavaScript 3.Microsoft发行jscript用于internet explorer. 4.最初的jscript和javascript差异过大,web程序员不得不痛苦的为两种浏览器编写两种脚本。于是诞生了ECMAScript,是一种国际标准化的javascr...
标签: Web开发
function GetCurrentStyle (obj, prop) {if (obj.currentStyle) {return obj.currentStyle[prop];}else if (window.getComputedStyle) {prop = prop.replace (/([A-Z])/g, "-$1");prop = prop.toLowerCase ();return window.getComputedStyle (obj, "").getPropertyValue(prop);}return null;} 代码来自于http://tvweek.com/javascripts/defau...

经验教程

789

收藏

55
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部