Javascript 在Chrome/Firefox中全屏按escape时未触发按键事件

我有这个网站，这是我的下一个投资组合网站：

在右下角，我有一个锚标记，它触发下一个javascript：

$(".expand").on("click", function() {
    $(document).toggleFullScreen();
    $("#header-container, #footer-container").toggleClass('toggle-display');
    $("header, footer").toggleClass('toggle-height');
    $("a.expand").toggleClass('toggle-bottom');
});

$(window).on("keydown", function(e) {
    var code = (e.keyCode ? e.keyCode : e.which);
    if (code == 27, 122) {
        $("#header-container, #footer-container").removeClass('toggle-display');
        $("header, footer").removeClass('toggle-height');
        $("a.expand").removeClass('toggle-bottom')
    }
});

第一个代码将触发“jquery.fullscreen 1.1.4”.js，由Klaus Reimer编写：

下一行将在css“toggledisplay”中添加一个类，它隐藏“#页眉容器”和“#页脚容器”。“切换高度”将为“页眉”和“页脚”（30px）提供新的高度，“切换底部”将为按钮提供新的右下边距

如果我用按钮切换，效果很好。但是，如果有人使用ESC（在Firefox中）或ESC和F11（在Chrome中）按钮，网站将从全屏上退出，但注入的CSS更改保持不变。这将破坏整个体验

所以我创建了第二个代码组，当有人按ESC或F11时，我在其中删除这些类

问题是：

• 在Firefox中，F11非常好用！它正在删除类，因此 垂直图像高度javascript还保持图像高度和 宽高比没有问题
• 但若按ESC键，它将从全屏中退出，但不会删除 上课。您需要再次按ESC或F11来运行代码。但是 然后，jquery.fullscreen仍在运行（因为没有任何关闭） 电话）。如果第二次按同一键，图像将垂直显示 在对视口进行更改之前，不会将其拟合到视口中 浏览器视口大小（例如：进入窗口模式并 更改浏览器大小）
• Chrome也有同样的问题，但因为Chrome进入本地 F11也全屏显示，问题也出现了

如果单击右下角的按钮，按ESC键，然后再次按该按钮，则功能将启动。现在它将进入全屏，就像按F11键一样。我没有问题，如果有人进入全屏与F11，他可以看到整个网站。我不想在选项中限制我的用户。F11没有动过对我有好处

有没有解决方案，原生全屏API会首先触发我的javascript行？我什么时候离开全屏

2013.09.14更新。 我认为这是一个与Webkit相关的问题。为什么它不能在Firefox（F11）中使用本机退出键，但不能使用本机退出键（ESC），即使我一直处于本机全屏模式。。。？我们能用什么方法欺骗它吗

2013.09.15更新。 考拉·德夫：

$(".expand").on("click", function() {
    $(document).toggleFullScreen();
});

$(document).on("fullscreenchange", function() {
    if($(document).fullScreen()){
        //Just went into fullscreen
        $("#header-container, #footer-container").addClass('toggle-display');
        $("header, footer").addClass('toggle-height');
        $("a.expand").addClass('toggle-bottom');
    }else{
        //Just exit fullscreen
        $("#header-container, #footer-container").removeClass('toggle-display');
        $("header, footer").removeClass('toggle-height');
        $("a.expand").removeClass('toggle-bottom');
    }
});

更新2013.09.16-解决方案

没有帮助调用

atmeretezo（）

inside

fullscreenchange

事件，所以我进行了一些搜索。原来有一个

：全屏
CSS伪类！：）




因此，我将js替换为：

// https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html
// https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode
// http://www.sitepoint.com/html5-full-screen-api/
$(document).ready(function(){
    function toggleFullScreen() {
      if (!document.fullscreenElement &&    // alternative standard method
          !document.mozFullScreenElement && !document.webkitFullscreenElement) {  // current working methods
        if (document.documentElement.requestFullscreen) {
          document.documentElement.requestFullscreen();
        } else if (document.documentElement.mozRequestFullScreen) {
          document.documentElement.mozRequestFullScreen();
        } else if (document.documentElement.webkitRequestFullscreen) {
          document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
        }
      } else {
        if (document.cancelFullScreen) {
          document.cancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        }
      }
    }

    $(".expand").on("click", function() {
        toggleFullScreen();
    });
});

我在CSS中添加了以下行：

/* EXPAND */
:-webkit-full-screen #header-container { display: none; visibility: hidden; }
:-webkit-full-screen #footer-container { display: none; visibility: hidden; }
:-moz-full-screen #header-container { display: none; visibility: hidden; }
:-moz-full-screen #footer-container { display: none; visibility: hidden; }
:fullscreen #header-container { display: none; visibility: hidden; }
:fullscreen #footer-container { display: none; visibility: hidden; }

:-webkit-full-screen header { height: 30px; }
:-webkit-full-screen footer { height: 30px; }
:-moz-full-screen header { height: 30px; }
:-moz-full-screen footer { height: 30px; }
:fullscreen header { height: 30px; }
:fullscreen footer { height: 30px; }

:-webkit-full-screen a.expand { bottom: 5px; }
:-moz-full-screen a.expand { bottom: 5px; }
:fullscreen a.expand { bottom: 5px; }
/* EXPAND */

您不能在一行中排序更多的div，否则将不起作用（我不知道为什么，浏览器会忽略代码的某些原因）

而且它的工作非常完美！F11原封不动，Chrome，Firefox在本机全屏API模式下完美调整图像大小，CSS代码仅为全屏修改
 您应该使用插件提供的来警告全屏状态的更改：

$(document).on("fullscreenchange", function() {
    if($(document).fullScreen()){
        //Just went into fullscreen
        $("#header-container, #footer-container").addClass('toggle-display');
        $("header, footer").addClass('toggle-height');
        $("a.expand").addClass('toggle-bottom');
    }else{
        //Just exit fullscreen
        $("#header-container, #footer-container").removeClass('toggle-display');
        $("header, footer").removeClass('toggle-height');
        $("a.expand").removeClass('toggle-bottom');
    }
});

您甚至可以在没有if/else的情况下执行此操作，并使用justtoggleclass而不是add/remove
为什么不绑定插件提供的
fullscreenchange
事件来检查全屏状态何时更改？在你的链接中有记录感谢你的帮助！它解决了这个问题，但创建了另一个（垂直图像高度.js在这种情况下不起作用）。你能帮我吗？我更新了我的问题。@user1442219你不能在
fullscreenchange
事件中调用
atmeretezo（）
？