如何检测页面何时退出全屏显示？

Question

我正在使用Three.js创建3D多人游戏，玩家可以在其中加入各种现有游戏。单击“播放”后，渲染器将附加到页面和全屏。这很好用，但是问题是，当我退出全屏显示时，它仍然保持附加状态。我想删除它，但是我不知道什么时候！

因此，基本上，我正在寻找一个事件，该事件说“此元素退出全屏显示”。

这是将渲染器附加到页面的方法：

container = document.getElementById('container');
document.body.appendChild(container);

var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize( WIDTH, HEIGHT);
container.appendChild( renderer.domElement );

如果我如何全屏显示：

THREEx.FullScreen.request(container); 
renderer.setSize(screen.width, screen.height);

此外，是否有办法阻止有人将鼠标指向页面顶部时出现该烦人的标题？而且，我想我可以防止Escape在Firefox和Chrome中执行其操作（退出全屏显示）preventDefault吗？

编辑：

确实触发了“ fullscreenchange”事件，但是在不同的浏览器下它具有不同的名称。例如，在Chrome上称为“
webkitfullscreenchange”，在Firefox上则称为“ mozfullscreenchange”。

Answer 1

全屏规范指定"fullscreenchange"每当页面的全屏状态发生变化（包括进入和退出全屏）时，都会在文档上触发（带有适当的前缀）事件。在该事件内，您可以检查document.fullScreenElement页面是否全屏显示。如果全屏显示该属性，则该属性将为非null。

查看MDN了解更多详细信息。

至于您的其他问题：不，没有办法阻止Esc退出全屏模式。这是确保用户始终对其浏览器的操作具有控制权的折衷方案。浏览器 永远不会
为您提供防止用户退出全屏模式的方法。期。

至于Firefox的渲染速度比Chrome慢，我可以向您保证，实际上并不是这样。如果您发现两种浏览器之间的性能差异很大，则可能意味着您的JavaScript代码是瓶颈，而不是GPU。