移动端touchend全屏失效及滚动触发全屏异常问题咨询

嘿，这俩问题都是移动端全屏功能的典型坑，我帮你拆解下：

一、touchend事件触发全屏失效的原因及解决办法 #

touchend触发全屏失败，大概率是这几个原因：

• 事件被动监听限制：现代浏览器默认给touch类事件设了passive: true，这时候你在回调里调用e.preventDefault()会无效，甚至可能导致全屏请求被浏览器的优化逻辑忽略。
• 异步执行问题：如果你的全屏请求被放在了setTimeout或者其他异步回调里，哪怕延迟0ms，也会脱离用户手势的上下文，浏览器会直接拒绝。
• 浏览器默认行为干扰：touchend之后浏览器可能会触发默认的触摸行为（比如点击跳转、滚动），抢占了全屏请求的时机。

给你个可行的处理代码：

const targetElement = document.getElementById('your-target');

targetElement.addEventListener('touchend', async (e) => {
  // 必须设置passive: false才能调用preventDefault
  e.preventDefault();
  try {
    if (document.fullscreenElement) {
      await document.exitFullscreen();
    } else {
      // 确保直接调用，不要套异步逻辑
      await targetElement.requestFullscreen();
    }
  } catch (err) {
    console.error('全屏操作失败:', err.message);
  }
}, { passive: false });

额外提醒：如果是老版本浏览器，可能需要加前缀（比如webkitRequestFullscreen），不过现在主流浏览器都支持标准API了。

二、滚动时触发全屏在Chrome异常的核心问题 #

你提到MDN说只能响应用户手势触发全屏，这里要明确：scroll事件不属于浏览器认可的「用户手势事件」。

Chrome对这个限制卡得特别严：只有click、touchstart、touchend、keydown这类直接由用户交互触发的事件，才能发起全屏请求。scroll事件是用户手势的「结果」，而非手势本身，所以在scroll回调里调用全屏，浏览器会直接拒绝。

而你说点击不拖动正常，是因为点击触发的是touchend/click事件，属于合法的用户手势上下文。

如果想实现「用户开始滚动就进入全屏」，得换个思路：在touchstart或touchmove事件（这俩属于用户手势事件）里判断用户是否开始滚动，然后同步发起全屏请求：

let startTouchY;
let hasRequestedFullscreen = false;
const targetElement = document.getElementById('your-target');

targetElement.addEventListener('touchstart', (e) => {
  startTouchY = e.touches[0].clientY;
  hasRequestedFullscreen = false;
}, { passive: true });

targetElement.addEventListener('touchmove', async (e) => {
  if (hasRequestedFullscreen) return;
  
  const currentY = e.touches[0].clientY;
  // 判断用户是否开始滚动（阈值可以自己调）
  if (Math.abs(currentY - startTouchY) > 10) {
    hasRequestedFullscreen = true;
    try {
      if (!document.fullscreenElement) {
        await targetElement.requestFullscreen();
      }
    } catch (err) {
      console.error('滚动时全屏请求失败:', err.message);
    }
  }
}, { passive: false });

这里要注意：

• 必须在touchmove的同步回调里发起请求，不能异步延迟
• 加个hasRequestedFullscreen标记，避免滚动过程中重复请求
• 有些浏览器可能还是会阻止这种操作（因为全屏会打断滚动体验），你得做好兼容和错误处理

最后补充几个通用坑：

• 页面必须是HTTPS协议（localhost除外），否则大部分浏览器会拒绝全屏请求
• 不是所有元素都能全屏（比如没加allowfullscreen的iframe），尽量用根元素或块级容器
• 全屏请求会返回Promise，一定要处理失败情况（比如用户手动拒绝、浏览器不支持）

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