如何通过鼠标滚动或左键点击退出Fullscreen API创建的全屏状态？

核心思路 #

通过监听全屏状态变化，仅在全屏激活时绑定鼠标滚动和左键点击事件，触发退出全屏逻辑；退出全屏后自动解绑事件，避免干扰正常页面操作。

完整代码（结合jQuery） #

// 原有的全屏切换函数
function toggleFullscreen() {
  if (!document.fullscreenElement) {
    // 如果是特定元素全屏，替换成你的目标元素，比如 $('#gallery')[0]
    document.documentElement.requestFullscreen();
  } else if (document.exitFullscreen) {
    document.exitFullscreen();
  }
}

// 统一处理退出全屏的逻辑
function exitFullscreenIfActive() {
  if (document.fullscreenElement && document.exitFullscreen) {
    document.exitFullscreen();
  }
}

// 监听全屏状态变化，动态绑定/解绑事件
document.addEventListener('fullscreenchange', function() {
  if (document.fullscreenElement) {
    // 进入全屏后，绑定滚动（鼠标滚轮）和左键点击事件
    $(document).on('wheel.fullscreen', exitFullscreenIfActive);
    $(document).on('click.fullscreen', function(e) {
      // 仅响应左键点击（button === 0 代表左键）
      if (e.button === 0) {
        exitFullscreenIfActive();
        // 阻止事件冒泡，避免触发页面其他点击逻辑
        e.stopPropagation();
      }
    });
  } else {
    // 退出全屏后，移除对应事件监听（命名空间避免误删其他事件）
    $(document).off('wheel.fullscreen click.fullscreen');
  }
});

关键细节说明 #

1. 事件命名空间：给绑定的事件加上.fullscreen命名空间，确保移除时只针对全屏相关的监听，不会影响页面其他地方的wheel或click事件。
2. 左键判断：通过e.button === 0明确只响应左键点击，排除右键、中键的误触。
3. 动态绑定：只有在全屏状态下才激活事件监听，减少不必要的性能消耗。
4. 元素适配：如果你的全屏目标是特定图片容器而非整个文档，将document.documentElement替换为你的目标DOM元素（比如$('#gallery')[0]），同时把事件监听绑定到该元素上，触发逻辑会更精准。

内容的提问来源于stack exchange，提问作者Someone Someone