如何阻止Android Chrome交互媒体控件时自动滚动到已聚焦元素

这是Android版Chrome的已知原生交互缺陷，触发逻辑为：输入类元素（input、textarea等）处于聚焦状态时，浏览器会记录其坐标，后续点击原生渲染的媒体控件时，会默认触发「回到聚焦输入框」的滚动逻辑。由于video/audio的播放、进度条、音量等控件属于浏览器原生UI层，不属于页面DOM节点，因此常规的mousedown/touchstart事件无法监听到这类控件的交互，onplay事件触发时机晚于滚动逻辑，也无法解决问题。

以下是可落地的修复方案：

• 方案1：全局触摸预判提前失焦
  给页面全局绑定touchstart事件，每次触摸时先判断当前是否存在聚焦的输入类元素，再判断触摸落点是否落在媒体元素的范围内，命中则主动移除输入框的聚焦状态，即可规避后续自动滚动。
  示例代码：

  document.addEventListener('touchstart', (e) => {
    const activeEl = document.activeElement;
    // 仅处理输入类元素聚焦的场景
    if (!['INPUT', 'TEXTAREA'].includes(activeEl?.tagName)) return;
    const mediaElements = document.querySelectorAll('video, audio');
    const touchX = e.touches[0].clientX;
    const touchY = e.touches[0].clientY;
  
    for (const media of mediaElements) {
      const rect = media.getBoundingClientRect();
      const isHitMedia = touchX >= rect.left && touchX <= rect.right 
        && touchY >= rect.top && touchY <= rect.bottom;
      if (isHitMedia) {
        activeEl.blur();
        break;
      }
    }
  }, { passive: true });
  

• 方案2：自定义媒体控件接管交互
  放弃浏览器原生的媒体控件，自行实现播放、进度条、音量调节等UI和交互逻辑，所有操作都在页面DOM层完成，完全规避原生控件的交互异常问题。
• 方案3：透明遮罩拦截事件
  给所有媒体元素上层覆盖一层同等大小的全透明div，优先监听遮罩的点击事件，先移除输入框聚焦状态后，再主动触发媒体元素的对应操作。该方案适合不需要调整进度、音量，仅需要播放暂停控制的场景。
• 方案4：滚动位置兜底
  输入框聚焦时记录当前页面滚动位置，监听页面scroll事件，若检测到非用户主动触发的回滚，直接调用window.scrollTo()重置到之前记录的位置。该方案会存在轻微的视觉跳动，仅作为兜底方案使用。

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