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

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

时间: 2024-09-11 19:29:08

解读IE和firefox下JScript和HREF的执行顺序_javascript技巧的相关文章

解决 FireFox 下[使用event很麻烦] 的问题._javascript技巧

在FireFox下编写事件处理函数是很麻烦的事. 因为FireFox并没有 window.event . 如果要得到 event 对象,就必须要声明时间处理函数的第一个参数为event. 所以为了兼容IE与FireFox,一般的事件处理方法为: btn.onclick=handle_btn_click; function handle_btn_click(evt) {     if(evt==null)evt=window.event;//IE     //处理事件. } 对于简单的程序,这不算

解决FireFox下[使用event很麻烦]的问题_javascript技巧

在FireFox下编写事件处理函数是很麻烦的事. 因为FireFox并没有 window.event . 如果要得到 event 对象,就必须要声明时间处理函数的第一个参数为event. 所以为了兼容IE与FireFox,一般的事件处理方法为: btn.onclick=handle_btn_click; function handle_btn_click(evt) {     if(evt==null)evt=window.event;//IE     //处理事件. } 对于简单的程序,这不算

uploadify在Firefox下丢失session问题的解决方法_javascript技巧

今天在用uploadify上传插件时遇到了一个问题,由于我后台做了权限管理,每个请求都有去读session判断权限,但用这个插件时发现登录后上传不了,原因是在读session时认为没有权限而被拦截了,后来在后台打印登录时产生session的id和上传时读取session的id,果然不一样,在网上搜索了一番,还真有不少人遇到这个问题,现把解决方案贴出来: 先说说我的环境,后台是用JSP,uploadify的版本是3.2 在JSP页面中的配置: 复制代码 代码如下: <script type="

firefox下javascript实现高亮关键词的方法_javascript技巧

一个和尚挑水吃.两个和尚抬水吃.三个和尚没水吃.总寺的方丈大人得知情况后,就派来了一名主持和一名书记,共同负责解决这一问题.主持上任后,发现问题的关键是管理不到位,于是就招聘一些和尚成立了寺庙管理部来制定分工流程.为了更好地借鉴国外的先进经验,寺庙选派唐僧等领导干部出国学习取经:此外,他们还专门花钱请了天主教.基督教的神父传授MBA.神父呆了不久留下几个东东就走了,一个叫BPR,一个叫ERP.   书记也没闲着,他认为问题的关键在于人才没有充分利用.寺庙文化没有建设好,于是就成立了人力资源部和寺

关于火狐(firefox)及ie下event获取的两种方法_javascript技巧

经常有同事问我在火狐浏览器怎么获取event的方法,大多是想获取event.keyCode的功能两种方法 第一种方法: 复制代码 代码如下: function a(e){ e=e||window.event; alert(e.keyCode); } ie浏览器如下调用 复制代码 代码如下: <body onclick="a()"> firefox火狐浏览器如下调用 复制代码 代码如下: <body onclick="a(event)"> 这样

JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结_javascript技巧

1.兼容firefox的 outerHTML,FF中没有outerHtml的方法. 复制代码 代码如下: if (window.HTMLElement) { HTMLElement.prototype.__defineSetter__("outerHTML",function(sHTML) { var r=this.ownerDocument.createRange(); r.setStartBefore(this); var df=r.createContextualFragment

IE和Firefox在JavaScript应用中的兼容性探讨_javascript技巧

1.document.formName.item("itemName") 问题 说 明:IE下,可以使用document.formName.item("itemName")或document.formName.elements ["elementName"];Firefox下,只能使用document.formName.elements["elementName"]. 解决方法:统一使用document.formName.el

IE和FireFox(FF)中js和css的不同_javascript技巧

在IE和FireFox(FF)中js和css的不同 css: 1. ul标签中FF中有个padding值,却没有margin值,而在IE中正好相反 解决办法:将ul的padding和margin都设为0(也可以不是0)如:padding:0;margin:0;list-style:none; js: 1. IE中innerText在FF中没有,使用textContent; eg: 复制代码 代码如下: var obj=document.getElementById("_td"); va

在JS中a标签加入单击事件屏蔽href跳转页面_javascript技巧

我们常用的在a标签中有点击事件: 1. a href="JavaScript:js_method();" 这是我们平台上常用的方法,但是这种方法在传递this等参数的时候很容易出问题,而且javascript:协议作为a的href属性的时候不仅会导致不必要的触发window.onbeforeunload事件,在IE里面更会使gif动画图片停止播放.W3C标准不推荐在href里面执行javascript语句 2. a href="javascript:void(0);"