javascript 退出全屏模式时捕获 ESC 事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25126106/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Capture ESC event when exiting full screen mode
提问by Venkat Janyavula
Requirement for me I have to show a particular div in full screen mode when I press a button and hide that div when the page comes back to normal mode.
对我的要求我必须在按下按钮时以全屏模式显示特定的 div，并在页面恢复正常模式时隐藏该 div。
I am able to achieve full screen mode with the code :-
我可以使用代码实现全屏模式：-
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");
}
}
But I am unable to capture ESC or Deny event so that I can again hide that div? Please advice what I have to do?
但是我无法捕获 ESC 或 Deny 事件，以便我可以再次隐藏该 div？请建议我必须做什么？
回答by photicSphere
Chrome does not fire a key event when using esc to leave fullscreen. However, a fullscreenchange event IS fired.
当使用 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
}
}
回答by Chris Halcrow
As photicSphere points out, Chrome will not fire a key event when exiting full screen mode. You need to define an event listener that listens for a change to full screen mode, like this (this stuff isn't well standardised, so you need to listen for the events fired by different browsers):
正如 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);
}
Then, when this event is fired by the browser, it will call an 'exitHandler' function that you define, and you can perform an action when the user is exitingfull screen mode by doing the following:
然后，当浏览器触发此事件时，它将调用您定义的“exitHandler”函数，您可以通过执行以下操作在用户退出全屏模式时执行操作：
function exitHandler() {
if (!document.webkitIsFullScreen && !document.mozFullScreen && !document.msFullscreenElement) {
... do something here
}
}
回答by Mimetix
$(document).keyup(function(e) {
if (e.keyCode == 27) { <DO YOUR WORK HERE> } // esc
});
U may find this useful: How to detect escape key press with JavaScript?
您可能会发现这很有用：如何使用 JavaScript 检测转义键按下？
