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

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

为了实现这一点，当页面加载时，iFrame被赋予焦点。如果焦点丢失，iFrame顶部会显示一个div覆盖，让他们知道焦点丢失。如果单击覆盖，它将隐藏，焦点将返回到iframe：

现在的问题是，在页面音量调整、更改iframe大小等方面存在一些控件，单击这些控件时需要将焦点返回到iframe：

---

问题是，当您单击音量控制焦点丢失时，它会在重新建立焦点和隐藏覆盖之前短暂显示覆盖。覆盖层一直闪烁看起来不太好，有什么方法可以很容易地阻止这种情况发生吗？

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

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

---

解决了这个问题。单击事件的顺序很重要，因此文档单击事件在包装器单击后激发：

// 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();
}

---

你用什么来决定控件是否有焦点？此外，可以有一种方法来考虑游戏本身的控制部分，所以技术上不会失去焦点。也就是说，如果控件和游戏窗口之间没有页面空间。

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

// 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();
}