js手势实现
手势识别基础概念
手势识别通常涉及触摸事件的监听和处理，包括触摸开始（touchstart）、触摸移动（touchmove）和触摸结束（touchend）。通过分析这些事件的坐标变化和时间差，可以识别出常见手势如点击、滑动、缩放、旋转等。
监听触摸事件
在JavaScript中，通过添加事件监听器来捕获触摸事件：
const element = document.getElementById('gesture-area');
element.addEventListener('touchstart', handleTouchStart, false);
element.addEventListener('touchmove', handleTouchMove, false);
element.addEventListener('touchend', handleTouchEnd, false);处理触摸数据
存储触摸点的初始位置和当前状态：
let touchStartX = 0;
let touchStartY = 0;
let touchEndX = 0;
let touchEndY = 0;
function handleTouchStart(event) {
touchStartX = event.touches[0].clientX;
touchStartY = event.touches[0].clientY;
}实现滑动识别
通过比较起始和结束位置的差值判断滑动方向：
function handleTouchMove(event) {
touchEndX = event.touches[0].clientX;
touchEndY = event.touches[0].clientY;
}
function handleTouchEnd() {
const dx = touchEndX - touchStartX;
const dy = touchEndY - touchStartY;
if (Math.abs(dx) > Math.abs(dy)) {
if (dx > 0) console.log('向右滑动');
else console.log('向左滑动');
} else {
if (dy > 0) console.log('向下滑动');
else console.log('向上滑动');
}
}实现双指缩放
通过计算两点间距离变化识别缩放：
let initialDistance = 0;
function handleTouchStart(event) {
if (event.touches.length === 2) {
initialDistance = getDistance(event.touches[0], event.touches[1]);
}
}
function handleTouchMove(event) {
if (event.touches.length === 2) {
const currentDistance = getDistance(event.touches[0], event.touches[1]);
const scale = currentDistance / initialDistance;
console.log(`缩放比例: ${scale}`);
}
}
function getDistance(touch1, touch2) {
return Math.hypot(
touch2.clientX - touch1.clientX,
touch2.clientY - touch1.clientY
);
}实现旋转识别
通过计算两点间角度变化识别旋转：
let initialAngle = 0;
function handleTouchStart(event) {
if (event.touches.length === 2) {
initialAngle = getAngle(event.touches[0], event.touches[1]);
}
}
function handleTouchMove(event) {
if (event.touches.length === 2) {
const currentAngle = getAngle(event.touches[0], event.touches[1]);
const rotation = currentAngle - initialAngle;
console.log(`旋转角度: ${rotation}°`);
}
}
function getAngle(touch1, touch2) {
return Math.atan2(
touch2.clientY - touch1.clientY,
touch2.clientX - touch1.clientX
) * 180 / Math.PI;
}使用现成库简化开发
对于复杂手势，推荐使用现成库如Hammer.js：
const hammer = new Hammer(element);
hammer.on('swipe', (event) => {
console.log(`滑动方向: ${event.direction}`);
});
hammer.on('pinch', (event) => {
console.log(`缩放比例: ${event.scale}`);
});
hammer.on('rotate', (event) => {
console.log(`旋转角度: ${event.rotation}`);
});性能优化建议
避免在touchmove事件中执行耗时操作，必要时使用requestAnimationFrame进行节流。对于移动端，注意处理被动事件监听器以提高滚动性能：
element.addEventListener('touchmove', handleTouchMove, { passive: true });兼容性处理
检测设备是否支持触摸事件，并提供备用方案：
const supportsTouch = 'ontouchstart' in window;
if (!supportsTouch) {
element.addEventListener('mousedown', handleMouseDown);
}
