不同浏览器中模糊事件的不同行为 [英] Different behavior of blur event in different browsers

问题描述

请看这个例子，其中有2个输入字段：

 < input id =a/> 
< input id =bstyle =display：none/> 
  

并考虑以下JavaScript，尝试这样做：

仅当 #a 具有焦点和隐藏<$时显示 #b 每当 #a 失去焦点时，除了 #a 失去时，c $ c> #b 其重点是 #b 。

  #a）。focus（function（）{
 $（＃b）。show（）; 
}）; 
 
 $（＃a，#b）blur（function（）{
 $（＃b）。hide（）; 
}）; 
 
 $（＃b）。focus（function（）{
 $（＃b）。show（）; 
}）; 
  

  $（＃a）。focus function（）{$（＃b）。show（）;}）; $（＃a，#b ; $（＃b）。focus（function（）{$（＃b）。show（）;}）;  

  #b {display：none;}  

上，而不是   / code> 

上述代码不正确，因为 $ #b）。focus（）永远不会被触发，因为一旦 #a 失去焦点， #b 已隐藏。这种预期的行为是在Firefox（版本24.6.0）中观察到的。

但是在Chrome（版本35.0），代码似乎运行不正确 ^？）。

很明显， b.focus 事件仍在Chrome中注册。
为什么此事件在Chrome中注册，但在Firefox中不注册？

---

更新

lt; / strong>中指定的 ： b b b ，首先触发模糊，然后关注 b 和<$ c c > 在IE10 中， c> code> b 被触发，但是 b 立即变得不可见，因为 b 之后。

这是一个没有使用jQuery的小提琴，产生相同的行为。

解决方案

问题是不同的浏览器选择以不同的顺序调用事件处理程序。一个解决方案是通过为 0 毫秒设置一个计时器，然后检查字段以查看哪个（如果有的话）被聚焦，给其他事件一个机会。 p>

  a.onfocus = function（）{show（b）;}; 
 
 a.onblur = function（）{
 setTimeout（function（）{
 //如果两个都不集中
 if（document.activeElement！== b &&& document.activeElement！== a）{
 hide（b）; 
} 
}，0）; 
}; 
 
 //与$ b相同的操作$ b b.onblur = a.onblur; 
  

在Chrome，Firefox，Internet Explorer和Safari中测试。在 JSFiddle.net 上查看完整的工作示例（您的小提琴的编辑版本）。

Consider this example where I have 2 input fields:

<input id="a" />
<input id="b" style="display: none" />

And consider the following JavaScript, which is an attempt to do this:

Show #b only when #a has focus and hide #b whenever #a loses focus, except when #a loses its focus to #b.

$("#a").focus(function() {
    $("#b").show();
});

$("#a, #b").blur(function() {
    $("#b").hide();
});

$("#b").focus(function(){
    $("#b").show();
});

$("#a").focus(function() {
  $("#b").show();
});

$("#a, #b").blur(function() {
  $("#b").hide();
});

$("#b").focus(function() {
  $("#b").show();
});

#b {
  display: none;
}

<input id="a" value=a>
<input id="b" value=b>
<br/>^ focus on the input

The above code is incorrect as $("#b").focus() would never be triggered because as soon as #a loses focus, #b is hidden. This expected behavior is observed in Firefox (Version 24.6.0).

But in Chrome (Version 35.0), the code seems to run incorrectly ^{(or correctly!?)}.

Clearly, the b.focus event is still being registered in Chrome. Why does this event register in Chrome, but not in Firefox?

---

Update

As pointed out by raina77ow:

• In Chrome, after we place the cursor on b, blur on a is fired first, then focus on b, and b stays visible.
• In Firefox, focus on b is not fired, so b becomes invisible.
• In IE10, however, somehow focus on b IS fired, but b becomes invisible immediately, as blur is fired on b right after.

Here's a fiddle without using jQuery, producing the same behavior.

解决方案

As you know, the issue is that different browsers choose to call event handlers in different orders. One solution is to give the other events a chance to fire by setting a timer for 0 milliseconds, and then checking the fields to see which (if any) is focused.

a.onfocus = function() {show(b);};

a.onblur = function() {
    setTimeout(function() {
        //if neither filed is focused
        if(document.activeElement !== b && document.activeElement !== a){
            hide(b);
        }
            }, 0);
};

//same action as for a
b.onblur = a.onblur;

Tested in Chrome, Firefox, Internet Explorer, and Safari. See full working example (edited version of your fiddle) at JSFiddle.net.

这篇关于不同浏览器中模糊事件的不同行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！