阻止元素在焦点短暂丢失时显示

Block element from showing when focus briefly lost

本文关键字：显示 元素 焦点      更新时间：2023-09-26

我有一个页面上有一个iFrame。 对于访问者来说，重要的是要知道iFrame是否具有浏览器的焦点。

为此，当页面加载时，将获得焦点iFrame。 如果焦点丢失，iFrame顶部会显示一个div overlay，让他们知道焦点丢失了。 如果单击overlay，则会将其隐藏，焦点将返回给iframe：

// When overlay is clicked, focus on game
$('#NoFocusOverlay').click(function () {
    focusOnGame();
});
// When game loses focus, show overlay
$('#GameIFrame').blur(function () {
    $('#NoFocusOverlay').fadeIn('fast');
});
function focusOnGame() {
    $('#GameIFrame').focus();
    $('#NoFocusOverlay').hide();
}

现在的问题是，页面上有一些控件（音量调整，更改iframe的大小等），单击时需要将焦点放回iFrame：

// Change volume of game via control on page
function changeVol(newVol){
    ... do vol change...
    focusOnGame();
}

问题是，当您单击音量控制焦点丢失时，它会在重新建立焦点并隐藏叠加之前简要显示叠加。 覆盖层不断闪烁看起来不太好，有没有办法轻松阻止这种情况发生？

你能在这里放一个if语句吗？

$('#GameIFrame').blur(function () {
    if (The Control ID DOES NOT HAVE Focus){
    $('#NoFocusOverlay').fadeIn('fast');
    }
});

修复了此问题。 click（） 事件的顺序很重要，因此文档单击事件在包装器单击后触发：

// Preserve order
var blockOverlay = false;
$('.game-outer-wrap').click(function () {
    blockOverlay = true;
});
$(document).click(function () {
    if (!blockOverlay) {
        $('#NoFocusOverlay').fadeIn('fast');
    } else {
        focusOnGame();
    }
    blockOverlay = false;
});
function focusOnGame() {
    $('#GameIFrame').focus();
    $('#NoFocusOverlay').hide();
}
相关文章：