如何禁用iOS滑动导航同时保留点击功能？

目前确实没有官方正规方法可以直接禁用iOS Safari的前进/后退滑动手势，你提到的边缘触摸拦截方案存在边缘点击失效、表单控件不兼容的问题，以下是几种更优的解决思路：

一、精准区分滑动与点击的触摸事件优化 #

核心思路是仅拦截从边缘发起的滑动行为，而非所有边缘触摸，这样可以保留边缘区域的点击（包括input、select等表单控件的交互），无需手动触发click事件。

实现代码示例：

const root = document.documentElement;
const EDGE_THRESHOLD = 40; // 边缘检测阈值，可根据需求调整
let startTouchX = 0;
let hasMoved = false;

// 记录触摸起始位置
root.addEventListener('touchstart', (e) => {
  startTouchX = e.touches[0].pageX;
  hasMoved = false;
});

// 判断是否为边缘滑动并拦截
root.addEventListener('touchmove', (e) => {
  const currentX = e.touches[0].pageX;
  const deltaX = currentX - startTouchX;

  // 仅拦截：左边缘向右滑（触发返回）、右边缘向左滑（触发前进）的滑动行为
  if (
    (startTouchX <= EDGE_THRESHOLD && deltaX > 10) || 
    (startTouchX >= window.innerWidth - EDGE_THRESHOLD && deltaX < -10)
  ) {
    hasMoved = true;
    e.preventDefault();
  }
});

优势： #

• 仅阻止触发前进/后退的滑动动作，边缘区域的点击、表单控件交互完全不受影响
• 无需额外处理touchend事件，代码逻辑更简洁

二、利用CSS touch-action属性（兼容性有限） #

尝试通过touch-action属性限制触摸行为，比如设置：

html {
  touch-action: pan-y; /* 仅允许垂直滑动，禁止水平滑动 */
}

注意： #

• iOS Safari对touch-action的支持存在局限性，该方法可能无法完全阻止边缘滑动返回，但可以降低触发概率
• 若页面需要水平滑动交互，此方法不适用

三、History API Hack（视觉层面“禁用”） #

通过history.replaceState添加一条重复的历史记录，让滑动返回停留在当前页面：

window.addEventListener('load', () => {
  history.replaceState(null, document.title, window.location.href);
  window.addEventListener('popstate', () => {
    history.replaceState(null, document.title, window.location.href);
  });
});

注意： #

• 这并非真正禁用滑动手势，只是让用户滑动后仍停留在当前页面
• 多次滑动可能会突破限制回到上一页，仅适合对体验要求不高的场景

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