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

Question

如果用户点击此文档中的某个表单字段，我想在HTML文档中显示某些内容，如果用户离开该表单字段，我想隐藏该特定内容（通过激活另一个或通过单击在页面上的其他地方）。

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

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

非常感谢！

Answer 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;
    ...
}