Javascript 在全屏按下escape时更改CSS类

我正在用它在我的网站上制作一个全屏的flash视频。为了让全屏正常工作，我还使用一些javascript在用户单击按钮进出全屏时在div上添加和删除全屏类

当用户使用退出键而不是按钮退出全屏模式时，我遇到了一个小问题。当使用escape键时，fullscreen类确实会被删除，这会稍微影响布局。是否有方法检测何时使用escape键退出全屏，然后删除全屏类

---

另外，我不是一个很好的javascript程序员，因此非常感谢您的帮助。

您可以在文档上绑定事件

document.addEventListener('keyup', function(e){ 

    if(e.which == 27){
          //add remove class.
     }
})

---

退出全屏模式时，Chrome不会触发按键事件。您需要定义一个事件侦听器来侦听对全屏模式的更改，如下所示（这些内容没有很好的标准化，因此您需要侦听由不同浏览器触发的事件）：

然后，当浏览器触发此事件时，它将调用您定义的“exitHandler”函数，当用户退出全屏模式时，您可以通过执行以下操作从div中删除该类：

function exitHandler() {
    if (!document.webkitIsFullScreen && !document.mozFullScreen && !document.msFullscreenElement) {
        var myDiv = document.getElementById("myDivId");
        myDiv.classList.remove("fullscreen");
    }
}

---

虽然我不得不将addEventListener更改为bind，但这仍然有效。它给了addEventListener一个未发现的错误。b非常感谢：）。这个答案很好，可以在进入全屏时轻松添加类，在退出时轻松删除。谢谢

function exitHandler() {
    if (!document.webkitIsFullScreen && !document.mozFullScreen && !document.msFullscreenElement) {
        var myDiv = document.getElementById("myDivId");
        myDiv.classList.remove("fullscreen");
    }
}