preventDefault()可阻止iOS滑动导航手势，Android端无效如何解决？

需求：在Web App的特定页面（如文档编辑页，画布边缘带有对象调整手柄）中，当触摸事件发生在绘图画布上时，拦截浏览器的边缘滑动前进/后退导航手势。现有代码在iOS Safari和iOS Chrome中有效，但在开启滑动导航手势的Android Chrome中无效。

问题分析 #

Android Chrome的边缘滑动导航手势优先级较高，仅在touchstart事件中调用preventDefault()无法可靠拦截，需要结合touchmove事件进行处理，同时需精准限制拦截范围为画布区域，避免影响页面其他区域的正常交互。

解决方案代码 #

/**
 * 在指定画布元素上拦截边缘滑动的前进/后退导航手势
 * 支持iOS Safari、iOS Chrome及开启滑动手势的Android Chrome
 * @param {HTMLElement} canvasElement - 需要拦截手势的绘图画布元素
 * @returns {Function} 用于恢复浏览器默认行为的清理函数
 */
function preventCanvasEdgeSwipeNavigation(canvasElement) {
  let shouldPrevent = false;

  function touchStart(ev) {
    // 仅处理单指触摸
    if (ev.touches.length !== 1) return;
    
    const touch = ev.touches[0];
    // 判断触摸点是否在画布范围内
    const canvasRect = canvasElement.getBoundingClientRect();
    const isTouchOnCanvas = 
      touch.clientX >= canvasRect.left && 
      touch.clientX <= canvasRect.right && 
      touch.clientY >= canvasRect.top && 
      touch.clientY <= canvasRect.bottom;

    if (!isTouchOnCanvas) return;

    // 检测是否为边缘滑动触发点（屏幕左右10%区域）
    shouldPrevent = 
      touch.clientX < window.innerWidth * 0.1 || 
      touch.clientX > window.innerWidth * 0.9;
  }

  function touchMove(ev) {
    if (shouldPrevent) {
      // 阻止默认行为以拦截导航手势
      ev.preventDefault();
    }
  }

  // 必须设置passive: false，否则无法调用preventDefault
  const options = { passive: false };

  window.addEventListener('touchstart', touchStart, options);
  window.addEventListener('touchmove', touchMove, options);

  // 返回清理函数，移除事件监听
  return () => {
    window.removeEventListener('touchstart', touchStart, options);
    window.removeEventListener('touchmove', touchMove, options);
  };
}

使用说明 #

1. 获取目标画布元素：

   const canvas = document.getElementById('your-canvas-id');
   

2. 启用拦截：

   const restoreNavigation = preventCanvasEdgeSwipeNavigation(canvas);
   

3. 当离开编辑页面或需要恢复默认导航时，调用清理函数：

   restoreNavigation();
   

关键实现细节 #

• 精准范围控制：通过getBoundingClientRect()判断触摸点是否在画布内，仅对画布区域的触摸事件进行处理
• 双事件监听：结合touchstart标记需要拦截的触摸，在touchmove中执行preventDefault()，适配Android Chrome的手势触发逻辑
• 可恢复机制：返回清理函数，方便在不需要拦截时恢复浏览器默认行为

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