Question

重现问题的步骤：

注意：使用名称创建两个输入，并在每个输入的focusin和blur事件中创建console.log("Test Focus In" + element.getAttribute("name"))和console.log("Test Blur" + element.getAttribute("name"))。

点击第一个元素
点击第二个元素
点击第一个元素
点击chrome chrome
单击chrome中的第二个元素。

预期的行为是什么？

LOG：

FirstElement中的测试焦点
测试模糊FirstElement
在SecondElement中测试焦点
测试模糊SecondElement
FirstElement中的测试焦点
测试模糊FirstElement
在SecondElement中测试焦点

出了什么问题？

但是这个发生了 LOG：

FirstElement中的测试焦点
测试模糊FirstElement
在SecondElement中测试焦点
测试模糊SecondElement
FirstElement中的测试焦点
测试模糊FirstElement
在FirstElement中测试焦点 进入窗口时，会立即触发Focusin并在离开窗口前模糊最后一个元素。
测试模糊FirstElement
在SecondElement中测试焦点

Answer 1

我不是100％肯定，但输入元素和一般的html元素是作为整个UI系统的一部分进行威胁的。简单地说，如果您更改浏览器选项卡，则意味着您将焦点元素从窗口更改为其他应用程序或系统控件。我可以完全错误，但即使我错了，这意味着不仅谷歌浏览器有这个问题。

对我而言，即使您在其他资源管理器中选择其他文件，您也希望始终在Windows资源管理器中保留所选文件 - 实际上当您切换窗口时，其行为与您上面的答案类似。

可能无法预防这种情况，但根据您的使用情况，您可以采取其他方法。你可以做的事情很少：

检查activeElement

这可以解决您的问题。您可以检查您的元素是否为activeElement，然后您确定在用户单击外部时不会调用该事件。 Here is very the same question (as yours) and explained solution

field.blur(function() {
    if(document.activeElement !== this) {
         // this is a blur that isn't a window blur
    }
});

我没试过，但也许你可以将它与document.hasFocus()

结合起来

页面可见性API

您可以检查浏览器标签是否按页面可见性api explained in this question进行关注。不幸的是，这不允许检查浏览器窗口是否失去焦点，但是如果用户更改了标签或切换到另一个应用程序。

模糊文件

当您的文档聚焦或模糊时，您可能必须执行某些操作：

    $( document ).on("focus", function(e){
        console.log("focus");
    });
    $( document ).on("blur", function(e){
        console.log("blur");
    });

这适用于制表符或应用更改以及外部点击，但不允许您阻止输入模糊 - 即使您将bubbling更改为capturing。

文件hasFocus

这使您可以检查文档是否与文档blur事件类似。您可以看到example here

从外部窗口返回时出现Onblur和Focus问题

1 个答案:

检查activeElement

页面可见性API

模糊文件

文件hasFocus