移动端Firefox中touchstart触发requestFullscreen不稳定问题求助

问题原因 #

Firefox移动端对touchstart事件的**瞬时激活（transient activation）**处理存在特殊逻辑：为优化触摸交互（比如防误触、滚动预加载），浏览器可能延迟touchstart回调的执行，导致回调触发时已超出浏览器允许调用requestFullscreen()的瞬时激活时间窗口，从而抛出权限错误。而click是触摸交互的最终合成事件，浏览器会确保它处于瞬时激活有效期内，因此调用更可靠。

解决方案 #

方案1：改用touchend事件触发全屏 #

touchend是用户完成触摸动作的明确事件，Firefox对其瞬时激活的支持更稳定，同时可通过preventDefault()避免长按触发右键菜单：

<!DOCTYPE html>
<html lang="en">
<body>
  <script>
    function toggleFullscreen(event) {
      event.preventDefault();
      if (document.fullscreenElement) {
        document.exitFullscreen();
      } else {
        document.documentElement.requestFullscreen();
      }
    }

    // 绑定touchend事件，确保可调用preventDefault
    window.addEventListener('touchend', toggleFullscreen, { passive: false });
  </script>
</body>
</html>

方案2：结合触摸时长区分点击与长按 #

若需保留长按手势功能，可在touchstart记录时间戳，touchend时判断触摸时长，仅对短时间触摸（即点击）触发全屏，同时避免长按触发右键菜单：

<!DOCTYPE html>
<html lang="en">
<body>
  <script>
    let touchStartTime = 0;
    const CLICK_THRESHOLD = 300; // 短点击阈值，单位ms

    function onTouchStart(event) {
      touchStartTime = Date.now();
    }

    function toggleFullscreen(event) {
      const touchDuration = Date.now() - touchStartTime;
      // 仅处理短点击
      if (touchDuration < CLICK_THRESHOLD) {
        event.preventDefault();
        if (document.fullscreenElement) {
          document.exitFullscreen();
        } else {
          document.documentElement.requestFullscreen();
        }
      }
      // 长按逻辑可在此单独处理
    }

    window.addEventListener('touchstart', onTouchStart, { passive: true });
    window.addEventListener('touchend', toggleFullscreen, { passive: false });
  </script>
</body>
</html>

方案3：优化click事件的冲突问题 #

若坚持使用click事件，可通过标记变量避免preventDefault()的冲突：

<!DOCTYPE html>
<html lang="en">
<body>
  <div id="app"></div>
  <script>
    let isFullscreenToggle = false;

    function toggleFullscreen(event) {
      isFullscreenToggle = true;
      if (document.fullscreenElement) {
        document.exitFullscreen();
      } else {
        document.documentElement.requestFullscreen();
      }
    }

    function onTouchStart(event) {
      // 仅在触发全屏时阻止默认行为
      if (isFullscreenToggle) {
        event.preventDefault();
        isFullscreenToggle = false;
      }
    }

    // 绑定click事件到目标元素，避免全局监听
    document.getElementById('app').addEventListener('click', toggleFullscreen, false);
    window.addEventListener('touchstart', onTouchStart, { passive: false });
  </script>
</body>
</html>

关键说明 #

• 瞬时激活是浏览器的安全机制，仅允许在用户主动触发的短时间事件回调内调用requestFullscreen()、play()等敏感API。
• Firefox移动端对touchstart的延迟处理是问题核心，改用touchend可绕过该限制。
• 使用{ passive: false }是为了允许在事件回调中调用preventDefault()，避免浏览器默认触摸行为（如右键菜单、滚动）。

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