浏览器全屏状态下监听esc，触发自定义事件

2023-10-16 13:50:12

了解如何在浏览器全屏状态下监听ESC键，触发自定义事件，让浏览器退出全屏模式时，你仍然可以监听按键事件。

浏览器默认不允许监听Esc，以实现Chrome退出全屏模式。但是，你仍然可以定义一个事件监听器来监听全屏模式的变化，就像这样。

document.addEventListener('fullscreenchange', (event) => {
  if (!document.fullscreenElement) {
    // 浏览器退出全屏模式时触发的事件
    // 触发你自己的自定义事件
    document.dispatchEvent(new Event('custom-event'));
  }
});

然后，你可以监听自定义事件，并在浏览器退出全屏模式时执行特定的动作，例如：

document.addEventListener('custom-event', () => {
  // 在浏览器退出全屏模式时触发的事件
  // 执行特定的动作
  console.log('浏览器退出全屏模式！');
});

通过这种方式，你就可以在浏览器全屏状态下监听ESC键，触发自定义事件，实现退出全屏模式时依然可以监听按键事件。

监听Esc键，触发自定义事件的步骤：

定义一个事件监听器来监听全屏模式的变化。
在浏览器退出全屏模式时触发自定义事件。
监听自定义事件，并在浏览器退出全屏模式时执行特定的动作。

注意：

不同的浏览器会触发不同的事件，你需要监听所有浏览器触发的事件。
你可以根据需要修改自定义事件的名称。
可以根据需要在自定义事件中传递数据。

示例代码：

// 监听全屏模式的变化
document.addEventListener('fullscreenchange', (event) => {
  if (!document.fullscreenElement) {
    // 浏览器退出全屏模式时触发的事件
    // 触发自定义事件
    document.dispatchEvent(new Event('custom-event'));
  }
});

// 监听自定义事件，执行特定的动作
document.addEventListener('custom-event', () => {
  // 在浏览器退出全屏模式时触发的事件
  // 执行特定的动作
  console.log('浏览器退出全屏模式！');
});