jQuery - 当焦点离开一组控件时引发事件答案

【问题标题】：jQuery - raise event when focus leaves a group of controlsjQuery - 当焦点离开一组控件时引发事件
【发布时间】：2013-07-05 12:53:07
【问题描述】：

我在一个 div 中有 3 个文本框，当焦点离开其中一个输入并且没有转到这 3 个输入中的另一个时，我需要引发一个事件。

只要用户正在编辑这 3 个控件之一，事件就不会引发。仅当焦点更改为不是这些输入之一的控件时才会引发该事件。

我尝试在所有 3 个输入上使用 focusout 并检查 document.ActiveElement 是否是 3 个输入之一，但一个控件的 focusout 出现在另一个控件上的 focusin 之前，因此 document.ActiveElement 始终为空。

有人知道如何解决这个问题吗？

【问题讨论】：

这是一个棘手的问题，我可能会采用短时间方法

标签： javascript jquery html jquery-focusout

【解决方案1】：

我会考虑使用计时器来解决这个棘手的难题。

当失去焦点时，启动计时器。然后，如果焦点设置在另一个“安全”输入上，您可以取消计时器。

类似这样的：

var timeoutID;

$("#TheSafeZone input").focus(function () {
    if (timeoutID) {
        clearTimeout(timeoutID);
        timeoutID = null;
    }
});

$("#TheSafeZone input").blur(function () {
    releaseTheHounds();
});

function releaseTheHounds() {
    timeoutID = setTimeout(function () {
            alert("You're all going to die down here");
    }, 1);
}

Here is a working example

注意：我已将超时设置为 1ms，这对我来说似乎工作可靠，但可能值得在其他浏览器中进行一些测试（我使用的是 Chrome）。我想这取决于 JS 引擎如何处理事件，但我对此知之甚少，无法自信地说所有浏览器都可以正常工作

【讨论】：

我得到的最佳答案之一。
我有类似的要求，我正在构建自定义自动完成控件。使用超时是我最后的方法。我想知道这是否可以在不使用超时的情况下完成
@Goutham 格式：嗯，可能。也许您需要为页面中的每个元素添加一个单击/焦点事件，并检查它是否从一个文本框移动到另一个文本框...虽然不确定这会比计时器更好，但我可以理解您的犹豫使用计时器 - 确实有点可疑

【解决方案2】：

使用相反的逻辑放置“模糊”和“焦点”事件，这样当用户离开 DIV 中指定的控件组时，只会触发“模糊”事件。

$(document).on("blur","#edit-area .form-control", function (event) {
      $('.editButtons').show();

  });
  $(document).on("focus","#edit-area .form-control", function (event) {
      $('.editButtons').hide();

  });

【讨论】：