javascript - 退出全屏模式时捕获 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

Chrome 在使用 esc 离开全屏时不会触发按键事件。但是，会触发全屏更改事件。

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
    }
}