jQuery：Firefox focusout事件

Question

我在div中有两个输入框，我想在输入的focusOut上隐藏该div，但前提是它们都没有焦点。

这是一个常见的Firefox问题（有人称之为坚持标准），但文档正在窃取其中的焦点。

HTML

---

<div id="baz">
   <input type="text" id="foo" name="foo" />
   <input type="text" id="bar" name="bar" />
</div>

的jQuery

---

// jQuery Example
jQuery(":input").focusout(function(){
   // Don't do anything if one of the input boxes has focus
   if( jQuery(":input").is( jQuery(document.activeElement) ){ return; }

   // Hide the container if one of the inputs loose focus
   jQuery(this).parents("div").css("display","none");
}

虽然这是一个常见的错误，但我忘记了过去我是如何解决它的。我认为在检查activeElement之前，它与设置超时或屏幕刷新有关。

---

jsFiddle Example

jsFiddle Updated（FF4相同问题）

Answer 1

Demo

jQuery(":input").focusout(function(){
    var elem = jQuery(this).parent("div");
    window.setTimeout(function(){
            // Don't do anything if one of the input boxes has focus
            if( jQuery(":input").is( jQuery(document.activeElement) )){ return; }

            // Hide the container if one of the inputs loose focus
            elem.hide();
    }, 0);
})

Demo

jQuery(document).ready(function () {
    var timeoutID;

    jQuery(":input").focus(function () {
        window.clearTimeout(timeoutID);
    }).focusout(function () {
        timeoutID = window.setTimeout(function () {
            jQuery("#baz").hide();
        }, 0);
    });
});

Answer 2

我认为amit_g的解决方案几乎就在那里。我依稀记得我已经用两种方式解决了这个问题：

1. 将输入与activeElement（上面显示的方法）进行比较
2. 在相应事件的元素上设置/清除“焦点”类

我认为这两种方法都需要使用setTimeout，因为Firefox有一个延迟触发器，我们需要强制执行。虽然我听说FF在这里遵守标准，但我个人认为标准需要修改。

---

因此，除了添加定时函数调用之外，如果其他“可接受”元素获得焦点，则还需要清除它。以下不是生产代码，但它确实显示它确实作为一个例子：

Example Solution

Example Solution (Even Better) - 将$debug设置为false

Example Solution (Localized Blocks) - 删除了调试杂乱