如何使用JavaScript检测浏览器是否启用了滑动导航手势？

• 利用触摸事件的中断信号判断
  浏览器触发原生滑动手势时，会中断JS的触摸事件流，触发touchcancel事件。你可以监听这个事件，一旦触发就标记原生手势已激活，后续暂时跳过自己的JS滑动逻辑：

  let isNativeGestureActive = false;
  
  document.addEventListener('touchstart', () => {
    isNativeGestureActive = false;
  });
  
  document.addEventListener('touchcancel', () => {
    isNativeGestureActive = true;
  });
  
  // 你的滑动手势处理函数
  function handleSwipe(event) {
    if (isNativeGestureActive) return;
    // 执行你的自定义滑动逻辑
  }
  

  这个方法的核心是抓住原生手势抢占触摸事件的特性，touchcancel就是原生手势启动的明确信号。

• 适配Pointer Events的现代浏览器
  对于支持Pointer Events的浏览器（比如Chrome、Edge），可以用pointercancel事件替代touchcancel，逻辑完全一致：

  let isNativeGestureActive = false;
  
  document.addEventListener('pointerdown', () => {
    isNativeGestureActive = false;
  });
  
  document.addEventListener('pointercancel', () => {
    isNativeGestureActive = true;
  });
  

• 通过滑动速度阈值过滤
  原生滑动手势（比如前进/后退）通常对应较快的滑动速度，你可以在JS逻辑里设置一个速度阈值，当滑动速度超过阈值时，判定为原生手势，不执行自定义逻辑：

  let startX = 0;
  let startTime = 0;
  
  document.addEventListener('touchstart', (e) => {
    startX = e.touches[0].clientX;
    startTime = Date.now();
  });
  
  document.addEventListener('touchend', (e) => {
    const endX = e.changedTouches[0].clientX;
    const duration = Date.now() - startTime;
    const distance = Math.abs(endX - startX);
    const speed = distance / duration; // 单位：像素/毫秒
  
    // 阈值可根据实际测试调整，这里假设0.5像素/毫秒是原生手势的临界值
    if (speed > 0.5) return;
  
    // 执行你的自定义滑动逻辑
  });
  

• 结合特定浏览器特征辅助判断
  虽然不同浏览器实现差异大，但可以结合UA或API辅助判断：

  • Safari：通过UA检测到Safari后，重点依赖touchcancel事件的触发；
  • Chrome/Edge：利用Pointer Events的pointercancel事件；
    不过这种方法兼容性有限，建议和前面的事件监听方法配合使用。

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