移动端三击检测实现难题：如何规避双击缩放干扰完成三击跳转

针对移动端浏览器双击缩放干扰三击事件的问题，放弃依赖event.detail，改用自定义计数+超时控制的方式实现，同时精准阻止双击缩放的触发，兼容包括iOS Safari新版本在内的所有浏览器。

实现思路 #

• 自定义点击计数器，在设定的时间窗口内统计点击/触摸次数
• 在第二次触摸结束时阻止默认行为，避免触发浏览器双击缩放
• 统一处理鼠标点击和触摸事件，避免重复触发

完整代码 #

// 初始化计数器和计时器
let clickCount = 0;
let clickTimer = null;
// 三击的时间窗口（单位：ms），可根据交互体验调整
const TRIPLE_CLICK_DELAY = 500;

function handleTripleClick(event) {
  clickCount++;

  if (clickCount === 1) {
    // 第一次点击/触摸，启动计时器，超时后重置计数
    clickTimer = setTimeout(() => {
      clickCount = 0;
    }, TRIPLE_CLICK_DELAY);
  } else if (clickCount === 2) {
    // 第二次操作，阻止默认行为避免触发双击缩放
    event.preventDefault();
  } else if (clickCount === 3) {
    // 第三次操作，执行三击逻辑
    clearTimeout(clickTimer);
    clickCount = 0;
    window.location.replace("http://google.com");
  }
}

// 监听触摸结束事件（用touchend而非touchstart，避免影响正常滚动）
window.addEventListener('touchend', function(event) {
  // 仅处理单指触摸，排除多指操作
  if (event.touches.length === 1) {
    handleTripleClick(event);
  }
}, { passive: false }); // 必须设置passive:false，才能调用preventDefault

// 监听鼠标点击事件，兼容桌面端
window.addEventListener('click', handleTripleClick);

关键注意事项 #

1. passive: false：移动端触摸事件默认是被动模式（passive: true），无法调用preventDefault()，必须显式设置为false才能阻止双击缩放。
2. 时间窗口调整：TRIPLE_CLICK_DELAY可根据用户交互习惯调整，建议范围300-600ms。
3. 单指触摸判断：避免多指操作被误判为三击，提升交互准确性。
4. 事件选择：使用touchend而非touchstart，防止阻止默认行为影响页面正常滚动。

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