退出全屏模式时捕获ESC事件

Question

对我的要求当我按下按钮并在页面恢复到正常模式时隐藏该div时,我必须以全屏模式显示特定的div.

我可以用代码实现全屏模式: -

function launchFullscreen(element) {
    if (element.requestFullscreen) {
        $('#bmessages').show();
        element.requestFullscreen();
    } else if (element.mozRequestFullScreen) {
        $('#bmessages').show();
        element.mozRequestFullScreen();
    } else if (element.webkitRequestFullscreen) {
        $('#bmessages').show();
        element.webkitRequestFullscreen();
    } else if (element.msRequestFullscreen) {
        $('#bmessages').show();
        element.msRequestFullscreen();
    } else {
        console.log("Fullscreen Unavailable");
    }
}

但我无法捕获ESC或Deny事件,以便我可以再次隐藏该div？请告诉我要做什么？

Answer 1

使用esc离开全屏时,Chrome不会触发关键事件.但是,会触发fullscreenchange事件.

document.addEventListener('fullscreenchange', exitHandler);
document.addEventListener('webkitfullscreenchange', exitHandler);
document.addEventListener('mozfullscreenchange', exitHandler);
document.addEventListener('MSFullscreenChange', exitHandler);

function exitHandler() {
    if (!document.fullscreenElement && !document.webkitIsFullScreen && !document.mozFullScreen && !document.msFullscreenElement) {
        ///fire your event
    }
}  

Answer 2

正如 photicSphere 指出的那样，Chrome 在退出全屏模式时不会触发按键事件。您需要定义一个事件侦听器来侦听全屏模式的更改，如下所示（这些东西没有很好地标准化，因此您需要侦听不同浏览器触发的事件）：

        if (document.addEventListener) {
            document.addEventListener('webkitfullscreenchange', exitHandler, false);
            document.addEventListener('mozfullscreenchange', exitHandler, false);
            document.addEventListener('fullscreenchange', exitHandler, false);
            document.addEventListener('MSFullscreenChange', exitHandler, false);
        }

然后，当浏览器触发此事件时，它将调用您定义的“exitHandler”函数，您可以通过执行以下操作在用户退出全屏模式时执行操作：

    function exitHandler() {
        if (!document.webkitIsFullScreen && !document.mozFullScreen && !document.msFullscreenElement) {
            ... do something here
        }
    }

Answer 3

$(document).keyup(function(e) {

  if (e.keyCode == 27) { <DO YOUR WORK HERE> }   // esc
});

你可能会发现这很有用：How to detector escape key press with JavaScript?