초점이 짧게 손실되었을 때 요소가 표시되지 않도록 차단합니다.

Question

페이지에 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(); 
} 

문제는, 초점을 다시 설정되기 전에 잠시 오버레이를 표시하고 오버레이가 숨겨져 있습니다. 오버레이가 계속 깜박 거리는 것을 좋아 보이지 않습니다. 쉽게 이런 일을 막을 방법이 있습니까?

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