当从全屏按下退出时更改CSS类

我正在使用this plugin在我的网站上制作Flash动画转到全屏显示。为了让全屏正常工作，我还使用一些JavaScript来在用户单击按钮进入和退出全屏时在div上添加和删除全屏类。当从全屏按下退出时更改CSS类

当用户使用退出键退出全屏模式而不是按钮时，我遇到了一个小问题。当使用退出键时，全屏类将被删除，从而引发布局。有没有办法检测退出键何时用于退出全屏，然后删除全屏类？

另外我不是一个JavaScript编码器，所以很多的帮助将不胜感激。

2013-03-17 tcherokee

您可以在文档

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

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

来源

2013-03-17 20:12:09 Anoop

这工作，虽然我不得不改变addEventListener绑定。这是给addEventListener一个未被捕获的错误。 b非常感谢:)。 – tcherokee 2013-03-18 10:42:43

绑定事件退出全屏模式时，Chrome将不会触发关键事件。您需要定义一个事件侦听器监听改变到全屏模式，这样的（这东西不能很好地规范，所以你要听由不同的浏览器触发的事件）：

if (document.addEventListener) { 
     document.addEventListener('webkitfullscreenchange', exitHandler, false); 
     document.addEventListener('mozfullscreenchange', exitHandler, false); 
     document.addEventListener('fullscreenchange', exitHandler, false); 
     document.addEventListener('MSFullscreenChange', exitHandler, false); 
    }

然后，此事件是由浏览器发射，它会调用您定义的“exitHandler”功能，你可以从你的DIV当用户通过以下操作退出全屏模式下删除类：

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

来源

2017-09-12 04:59:32

当从全屏按下退出时更改CSS类

回答

相关问题