通过监听touchstart、touchmove和touchend事件，可实现滑动、长按、双击和缩放手势；1. 滑动手势通过坐标差判断方向；2. 长按通过setTimeout检测时长；3. 双击基于两次点击时间间隔；4. 缩放通过两指距离变化计算比例；需注意阈值设置、默认行为阻止及性能优化。
在移动端开发中，手势识别是提升用户体验的重要环节。JavaScript 虽然原生不提供完整的手势识别 API，但可以通过监听触摸事件（touch events）来实现常见的手势，如滑动、长按、双击、缩放等。下面介绍如何使用原生 JavaScript 实现基础的手势识别功能。
1. 监听触摸事件
移动端手势的基础是 touchstart、touchmove 和 touchend 三个事件。通过记录触摸点的位置和时间变化，可以判断用户的手势行为。
基本结构如下：
element.addEventListener('touchstart', function(e) {
// 手指按下
});
<p>element.addEventListener('touchmove', function(e) {
// 手指移动
});</p><p>element.addEventListener('touchend', function(e) {
// 手指抬起
});</p>2. 实现常见手势
滑动手势（swipe）
立即学习“Java免费学习笔记（深入）”；
通过比较 touchstart 和 touchend 的坐标差值，判断滑动方向。
let startX, startY, moveX, moveY;
<p>element.addEventListener('touchstart', function(e) {
startX = e.touches[0].clientX;
startY = e.touches[0].clientY;
});</p><p>element.addEventListener('touchend', function(e) {
moveX = e.changedTouches[0].clientX - startX;
moveY = e.changedTouches[0].clientY - startY;</p><p>const threshold = 50; // 最小滑动距离</p><p>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('向上滑');
}
}
});</p>长按手势（long press）
通过 setTimeout 判断手指按压时长。
let pressTimer;
<p>element.addEventListener('touchstart', function() {
pressTimer = setTimeout(() => {
console.log('长按触发');
}, 800); // 800ms 视为长按
});</p><p>element.addEventListener('touchend', function() {
clearTimeout(pressTimer);
});</p>双击手势（double tap）
记录两次点击的时间间隔，判断是否为双击。
let lastTap = 0;
<p>element.addEventListener('touchend', function(e) {
const currentTime = new Date().getTime();
const tapLength = currentTime - lastTap;</p><p>if (tapLength < 300 && tapLength > 0) {
console.log('双击触发');
e.preventDefault();
}</p><p>lastTap = currentTime;
});</p>缩放手势（pinch）
需要监听多个触摸点之间的距离变化。
let startDistance = 0;
<p>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 <em> dx + dy </em> dy);
}
});</p><p>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 <em> dx + dy </em> dy);</p><pre class='brush:php;toolbar:false;'>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 等成熟库，但掌握原生实现有助于更好地控制交互细节。
