JavaScript / DOM：如果焦点丢失到另一个窗口（应用程序），如何防止模糊事件答案

【问题标题】：JavaScript / DOM: how to prevent blur event if focus is lost to another window (application)JavaScript / DOM：如果焦点丢失到另一个窗口（应用程序），如何防止模糊事件
【发布时间】：2014-07-08 17:32:03
【问题描述】：

如果用户单击此文档中的某个表单域，我想在 HTML 文档中显示某些内容，并且如果用户离开该表单域（通过激活另一个表单域或通过单击页面上的其他位置）。

我尝试使用焦点和模糊事件来实现该行为。这原则上可行，但存在一个问题：各个字段上的 blur 事件不仅会在用户在 same 文档中移动焦点时触发，而且在另一个窗口（可能是来自不同的应用程序）被激活（获得焦点）。

我怎样才能避免这种情况？如果焦点转到其他应用程序（或其他浏览器窗口或选项卡），我不希望看到页面中的任何更改。

非常感谢！

【问题讨论】：

将 if(!document.hasFocus()){return;} 添加到 blur() 处理程序的顶部
感谢您的建议。我已经尝试过了，但不幸的是，从模糊处理程序中调用 document.hasFocus() 时返回 true（我已将该处理程序附加到输入字段 - 这是一个错误吗？）。
您可能会使用旧的事件错误应对方案；一个围绕处理程序的肉的 setTimeout。
我刚刚尝试过：如果我将模糊处理程序附加到窗口对象，您的第一个建议似乎有效！所以我会尝试相应地更改处理程序（通过使用 event.xxtargetxx 属性应该是可行的）。如果我能让这个工作，我明天会报告。
还有一个问题：当我将模糊处理程序附加到文档对象（而不是窗口对象）时，在激活另一个应用程序的窗口时，它似乎被调用了两次。任何想法为什么会发生这种情况（在 FF30 / Win 7 中）？

标签： javascript dom focus blur

【解决方案1】：

使用if ( document.activeElement === this ) { return; } 保护模糊事件处理程序。

下一步是防止在窗口重新获得焦点时激活焦点事件处理程序。这可以使用一个小模式来完成：

function onFocus(e) {
    if ( this._isFocused ) { return; }
    this._isFocused = true;
    ...
}

function onBlur(e) {
    if ( document.activeElement === this ) { return; }
    this._isFocused = false;
    ...
}

【讨论】：