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

【问题标题】：Capture ESC event when exiting full screen mode退出全屏模式时捕获 ESC 事件
【发布时间】：2014-09-27 08:45:48
【问题描述】：

对我的要求我必须在按下按钮时以全屏模式显示特定的 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？请指教我该怎么做？

【问题讨论】：

可能相关：stackoverflow.com/questions/10706070/…
@VenkatJanyavula ，希望这个链接对你有用：stackoverflow.com/questions/20343309/…

标签： javascript jquery html css

【解决方案1】：

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

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

你可能会觉得这很有用：How to detect escape key press with JavaScript?

【讨论】：

这在 Chrome 中启用“全屏模式”时根本不起作用。仅当您退出“全屏模式”时才有效。
event.keyCode 已弃用 (developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode)。不要再使用它了。相反，您应该使用KeyboardEvent.code (developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code)

【解决方案2】：

Chrome 在使用 esc 离开全屏时不会触发按键事件。但是，会触发 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
    }
}

【讨论】：

非常有用！！它帮助了我！

【解决方案3】：

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

【讨论】：