如何在Firefox中监听退出全屏事件？现有代码其他浏览器正常

我来帮你搞定这个Firefox的全屏监听坑！你的代码在Chrome、Safari、Edge正常，但Firefox里监听不到退出全屏事件，核心原因是Firefox的fullscreenchange事件只会绑定在document对象上，而不是你发起全屏请求的DOM元素——Chrome等浏览器同时支持在元素和document上触发该事件，所以你的原代码在Firefox里抓不到事件。

修正后的完整代码 #

const el = $('.mydiv')[0];
const rfs = el.requestFullscreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen;

// 统一处理全屏状态变化的回调函数
function handleFullscreenChange() {
  // 检查当前是否处于全屏状态
  const isInFullscreen = document.fullscreenElement || 
                         document.webkitFullscreenElement || 
                         document.mozFullScreenElement || 
                         document.msFullscreenElement;

  if (!isInFullscreen) {
    // 这里就是你原来的exitListener逻辑，比如：
    console.log('已退出全屏模式');
    // 可以在这里执行退出后的清理操作
  }
}

// 给document绑定所有浏览器前缀的全屏变化事件
document.addEventListener('fullscreenchange', handleFullscreenChange);
document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
document.addEventListener('mozfullscreenchange', handleFullscreenChange);
document.addEventListener('msfullscreenchange', handleFullscreenChange);

// 触发全屏请求
rfs.call(el);

关键细节说明 #

1. 事件绑定对象：必须把事件监听绑定到document上，Firefox不会在目标元素上触发fullscreenchange事件，这是和Chrome最大的区别。
2. 全屏状态判断：通过document上的前缀属性判断当前是否处于全屏，而不是目标元素的属性，这样跨浏览器更可靠。
3. 统一回调：把进入和退出全屏的逻辑放在同一个回调里，通过状态判断区分操作，比单独监听退出更简洁兼容。

另外，如果你需要主动退出全屏，也要调用document上的对应方法，确保跨浏览器兼容：

function exitFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen();
  }
}

内容的提问来源于stack exchange，提问作者Joey Yi Zhao