防止Esc键在网站上退出全屏应用程序模式 [英] Prevent Esc Key from Exiting FullScreen App Mode on Website

问题描述

我正在开发一个自定义的灯箱照片库。我添加了关键事件侦听器（left> prev，right> next，esc> close），并且遇到Safari（或任何全屏模式浏览器）退出全屏模式的问题。我的网站工作正常，只是观众必须恢复全屏模式的Safari（和其他人）。

I'm developing a custom "lightbox" photo gallery. I'm adding key event "listeners" (left>prev, right>next, esc>close), and I'm having the issue of Safari (or any fullscreen mode browser) exiting fullscreen mode on escape. My site works fine, just the viewer then has to resume fullscreen mode for Safari (and others).

现在，我知道有一种方法可以绕过这一点。例如，Facebook在剧场模式下查看照片时，可以用esc键关闭，而不会导致我的浏览器退出全屏。

Now, I know there's a way to bypass this. Facebook for instance, while looking at a photo in the "theatre" mode, can be closed with the esc key without causing my browser to exit fullscreen.

有什么想法吗？ / p>

Any thoughts?

推荐答案

实际上，您无法为浏览器禁用 ESC 键，因为这对用户来说至少是妥协一些控制他们的浏览器。
然而，当你按下 Esc 时，你确实有办法将eventlistener绑定到你的元素字段（比如说你的lightbox div）来捕获事件，如下所示：人们在图库div上按 ESC 它不会退出浏览器全屏）

Practically you cannot disable ESC key for browsers as that is a compromise for user to at least have some control over their browser. However, you do have a way to bind an eventlistener to your element field (say your lightbox div) to catch the Event when Esc is pressed and suppress it, like below: (so when people press ESC over the gallery div it will not exit browser fullscreen)

document.querySelector("div.lightbox").addEventListener("keydown",function(e){
    var charCode = e.charCode || e.keyCode || e.which;
    if (charCode == 27){
         alert("Escape is not suppressed for lightbox!");
        return false;
    }
});

此外，许多浏览器现在都使用 F11 键切换全屏模式。

Also many browsers toggle fullscreen mode with F11 key now.

这篇关于防止Esc键在网站上退出全屏应用程序模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！