文章/答案/技术大牛

发布

社区首页 >问答首页 >当焦点短暂丢失时，阻止元素显示

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

Stack Overflow用户

提问于 2014-11-27 03:11:43

回答 2查看 62关注 0票数 0

我有一个页面，上面有一个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();
}

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

javascript

jquery

mouseover

show-hide

回答 2

Stack Overflow用户

发布于 2014-11-27 03:20:44

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

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

票数 0

Stack Overflow用户

发布于 2014-11-27 21:52:33

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/27157105

复制

相似问题

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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