移动端JS手势识别技巧与实现方法

• 滑动手势（swipe）：记录 touchstart 时的坐标，在 touchend 时对比位移和时间，判断是否为快速滑动。
• 长按手势（long press）：touchstart 后启动定时器，若在指定时间内未触发 touchend，则判定为长按。
• 双击手势（double tap）：记录两次点击的时间间隔和位置，若都在阈值内则判定为双击。
• 缩放手势（pinch）：通过两个手指间的距离变化判断放大或缩小。

element.addEventListener('touchstart', function(e) {
  // 记录初始触摸点
  console.log(e.touches);
});
<p>element.addEventListener('touchmove', function(e) {
// 手指移动中
e.preventDefault(); // 阻止默认滚动行为（谨慎使用）
});</p><p>element.addEventListener('touchend', function(e) {
// 手指离开屏幕
});</p>

let startX, startY;
let isSwiping = false;
<p>element.addEventListener('touchstart', function(e) {
const touch = e.touches[0];
startX = touch.clientX;
startY = touch.clientY;
isSwiping = true;
}, { passive: false });</p><p>element.addEventListener('touchmove', function(e) {
if (!isSwiping) return;
e.preventDefault();
}, { passive: false });</p><p>element.addEventListener('touchend', function(e) {
const touch = e.changedTouches[0];
const diffX = touch.clientX - startX;
const diffY = touch.clientY - startY;</p><p>// 判断滑动距离和角度
if (Math.abs(diffX) > 30 && Math.abs(diffY) < 50) {
if (diffX > 0) {
console.log('swipe right');
} else {
console.log('swipe left');
}
}
isSwiping = false;
}, { passive: false });</p>

• 使用 passive: false 显式声明可以调用 preventDefault()，否则某些浏览器会忽略。
• 避免过度阻止默认行为，以免影响页面正常滚动。
• 加入速度判断可提高滑动识别准确率（位移 / 时间）。
• 对于复杂手势，建议封装成类或使用成熟库如 Hammer.js。