通过监听touchstart、touchmove和touchend事件，可实现滑动、长按、双击和缩放手势；1. 滑动手势通过坐标差判断方向；2. 长按通过setTimeout检测时长；3. 双击基于两次点击时间间隔；4. 缩放通过两指距离变化计算比例；需注意阈值设置、默认行为阻止及性能优化。
在移动端开发中，手势识别是提升用户体验的重要环节。JavaScript 虽然原生不提供完整的手势识别 API，但可以通过监听触摸事件（touch events）来实现常见的手势，如滑动、长按、双击、缩放等。下面介绍如何使用原生 JavaScript 实现基础的手势识别功能。
1. 监听触摸事件
移动端手势的基础是 touchstart、touchmove 和 touchend 三个事件。通过记录触摸点的位置和时间变化，可以判断用户的手势行为。
基本结构如下：
element.addEventListener('touchstart', function(e) {
// 手指按下
});
element.addEventListener('touchmove', function(e) {
// 手指移动
});
element.addEventListener('touchend', function(e) {
// 手指抬起
});
2. 实现常见手势
滑动手势（swipe）
立即学习“Java免费学习笔记（深入）”；
通过比较 touchstart 和 touchend 的坐标差值，判断滑动方向。
let startX, startY, moveX, moveY;element.addEventListener('touchstart', function(e) { startX = e.touches[0].clientX; startY = e.touches[0].clientY; });
element.addEventListener('touchend', function(e) { moveX = e.changedTouches[0].clientX - startX; moveY = e.changedTouches[0].clientY - startY;
const threshold = 50; // 最小滑动距离
if (Math.abs(moveX) > Math.abs(moveY)) { if (moveX > threshold) { console.log('向右滑'); } else if (moveX < -threshold) { console.log('向左滑'); } } else { if (moveY > threshold) { console.log('向下滑'); } else if (moveY < -threshold) { console.log('向上滑'); } } });
长按手势（long press）
通过 setTimeout 判断手指按压时长。
let pressTimer;element.addEventListener('touchstart', function() { pressTimer = setTimeout(() => { console.log('长按触发'); }, 800); // 800ms 视为长按 });
element.addEventListener('touchend', function() { clearTimeout(pressTimer); });
双击手势（double tap）
记录两次点击的时间间隔，判断是否为双击。
let lastTap = 0;element.addEventListener('touchend', function(e) { const currentTime = new Date().getTime(); const tapLength = currentTime - lastTap;
if (tapLength < 300 && tapLength > 0) { console.log('双击触发'); e.preventDefault(); }
lastTap = currentTime; });
缩放手势（pinch）
需要监听多个触摸点之间的距离变化。
let startDistance = 0;element.addEventListener('touchstart', function(e) { if (e.touches.length === 2) { const dx = e.touches[0].clientX - e.touches[1].clientX; const dy = e.touches[0].clientY - e.touches[1].clientY; startDistance = Math.sqrt(dx dx + dy dy); } });
element.addEventListener('touchmove', function(e) { if (e.touches.length === 2) { const dx = e.touches[0].clientX - e.touches[1].clientX; const dy = e.touches[0].clientY - e.touches[1].clientY; const currentDistance = Math.sqrt(dx dx + dy dy);
if (startDistance > 0) { const scale = currentDistance / startDistance; if (scale > 1.1) { console.log('放大'); } else if (scale < 0.9) { console.log('缩小'); } }} });
3. 注意事项
实际应用中需注意以下几点：
- 避免误触：设置合理的阈值和延迟
- 阻止默认行为：某些手势可能与页面滚动冲突，可使用 e.preventDefault()
- 兼容性：不同设备和浏览器对手势事件的支持略有差异
- 性能优化：频繁触发的 touchmove 应做节流处理
基本上就这些。用原生 JavaScript 实现手势识别并不复杂，关键是理解触摸事件的流程和数据变化逻辑。如果项目需求复杂，也可以考虑使用 Hammer.js 等成熟库，但掌握原生实现有助于更好地控制交互细节。
