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

Posted 2021-03-28

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

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

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

非常感谢你！

答案

使用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;
    ...
}