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);
}