Question

我的网页上有一个iFrame。对于访问者来说，了解iFrame是否具有浏览器的焦点非常重要。

为实现此目的，当页面加载时，iFrame被赋予焦点。如果焦点丢失，则会在overlay的顶部显示div iFrame，让他们知道焦点丢失。如果点击了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();
}

问题是，当您单击音量控制焦点丢失时，它会在重新建立焦点并隐藏叠加层之前短暂显示叠加层。叠加层保持闪烁并不好看，有没有办法轻易阻止这种情况发生？

Answer 1

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

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

Answer 2

修正了此问题。 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();
}

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

2 个答案: