Question

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

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

我尝试在所有3个输入上使用focusout并检查document.ActiveElement是否是3个输入中的一个，但是focusout的{{1}}在focusin之前发生在另一个上document.ActiveElement所以{{1}} 1}}总是空的。

任何人都知道如何解决这个问题？

Answer 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引擎如何处理事件，但我不知道如何自信地说所有浏览器都会工作相同

Answer 2

将“Blur”和“Focus”事件放在相反的逻辑中，以便当用户离开DIV中指定的控件组时，只会触发“Blur”事件。

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

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

  });

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

2 个答案: