javascript 在浏览器全屏状态下如何监听按下esc键的动作？

要在浏览器全屏状态下监听用户按下 ESC 键的动作，需要结合使用 JavaScript 和浏览器的 Fullscreen API。下面是详细的步骤和示例代码：

监听 ESC 键动作的步骤：

1. 检测浏览器全屏状态： 使用 Fullscreen API 中的 document.fullscreenElement 属性可以检测当前是否处于全屏状态。

2. 监听键盘事件： 使用 JavaScript 监听 keydown 或 keyup 事件来捕获用户按下 ESC 键的动作。

3. 处理事件： 当用户按下 ESC 键时，需要检查当前是否处于全屏状态，如果是则执行退出全屏的操作。

示例代码：

以下示例演示了如何在浏览器全屏状态下监听 ESC 键的按下事件，并退出全屏状态：

javascript
复制代码
// 监听键盘按键事件
document.addEventListener('keydown', function(event) {
    // 判断按下的键是否为 ESC 键，对应键码为 27
    if (event.keyCode === 27) {
        // 检查当前是否处于全屏状态
        if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement) {
            // 退出全屏
            if (document.exitFullscreen) {
                document.exitFullscreen();
            } else if (document.webkitExitFullscreen) {
                document.webkitExitFullscreen();
            } else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            } else if (document.msExitFullscreen) {
                document.msExitFullscreen();
            }
        }
    }
});

解释：

• keydown 事件: 当用户按下键盘上的任何键时触发。
• event.keyCode: 按键的键码，27 表示 ESC 键。
• Fullscreen API: document.fullscreenElement 等属性用于检测和管理全屏状态。
• 退出全屏: 使用 exitFullscreen()、webkitExitFullscreen()、mozCancelFullScreen() 或 msExitFullscreen() 方法退出当前的全屏模式，具体方法根据浏览器的不同而有所不同。

注意事项：

• 浏览器兼容性: 不同浏览器对 Fullscreen API 的支持可能有所不同，需要考虑使用不同的前缀（如 webkit、moz、ms）来调用相应的方法。
• ESC 键的处理: 在监听键盘事件时，需要确保只有在全屏状态下按下 ESC 键时才触发退出全屏的操作。

通过以上步骤和示例代码，可以实现在浏览器全屏状态下监听 ESC 键的按下事件，并在用户按下 ESC 键时退出全屏。