防止Esc密鑰退出網站上的FullScreen應用程序模式

Question

我正在開發一個自定義的“燈箱”照片庫。 我正在添加關鍵事件“監聽器”（左>上一個，右>下一個，esc>關閉），我遇到退出全屏模式的Safari（或任何全屏模式瀏覽器）的問題。 我的網站工作正常，只有觀眾必須恢復Safari（和其他人）的全屏模式。

現在，我知道有辦法繞過這個。 例如，Facebook在“影院”模式下查看照片時，可以使用esc鍵關閉，而不會導致我的瀏覽器退出全屏。

有什么想法嗎？

Answer 1

實際上你無法為瀏覽器禁用ESC鍵，因為這對用戶來說是一種妥協，至少可以控制他們的瀏覽器。 但是，你確實有辦法將eventlistener綁定到你的元素字段（比如你的燈箱div），以便在按下Esc時捕獲事件並禁止它，如下所示:(所以當人們在畫廊div上按ESC時它不會退出瀏覽器全屏）

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鍵切換全屏模式。