从外面返回时出现模糊和焦点问题 window

Question

重现问题的步骤：

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

单击第一个元素
点击第二个元素
单击第一个元素
单击外部 chrome
点击chrome里面的第二个元素。

预期的行为是什么？

日志：

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

出了什么问题？

但是这发生了日志：

在 FirstElement 中测试焦点
测试模糊第一个元素
在 SecondElement 中测试焦点
测试模糊 SecondElement
在 FirstElement 中测试焦点
测试模糊 FirstElement
在 FirstElement 中测试焦点 当进入 windows 时，在离开 window 之前立即触发最后一个元素的 Focusin 和模糊。
测试模糊第一个元素
在 SecondElement 中测试焦点

Answer 1

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

对我来说，这就像您想一直在 windows 资源管理器中保留 selected 文件，即使您在其他资源管理器中 select 其他文件 -实际上，当您切换 window 时，行为类似于您上面的回答。

防止这种情况可能是不可能的，但是根据您的用例，您可能会采取另一种方法。您可以做的事情很少：

检查活动元素

这可以解决您的问题。您可以检查您的元素是否为 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。不幸的是，这不允许检查浏览器是否 window 失去焦点，但如果用户更改了选项卡或切换到另一个应用程序。

关于模糊的文档

当文档聚焦或模糊时，您可能需要做一些事情：

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

这非常适用于选项卡或应用程序更改以及外部点击，但不允许您防止输入模糊 - 即使您将 bubbling 更改为 capturing。

文档有焦点

这允许您检查您的文档是否聚焦于类似于文档 blur 的事件。可以看到example here

从外面返回时出现模糊和焦点问题 window

Onblur and Focus issue when returning from outside window

javascript

jquery

google-chrome

focus

检查活动元素

页面可见度API

关于模糊的文档

文档有焦点