js判断touch滑动距离

在JavaScript中，可以通过监听触摸事件（touchstart、touchmove、touchend）来判断用户的滑动距离。以下是一个简单的示例，展示了如何计算滑动距离：

基础概念

触摸事件：touchstart、touchmove、touchend分别表示触摸开始、触摸移动和触摸结束。
TouchEvent对象：包含了触摸点的信息，如位置（clientX、clientY）。

示例代码

let startX, startY;

document.addEventListener('touchstart', (event) => {
    startX = event.touches[0].clientX;
    startY = event.touches[0].clientY;
});

document.addEventListener('touchend', (event) => {
    const endX = event.changedTouches[0].clientX;
    const endY = event.changedTouches[0].clientY;

    const deltaX = endX - startX;
    const deltaY = endY - startY;

    console.log(`水平滑动距离: ${deltaX}px`);
    console.log(`垂直滑动距离: ${deltaY}px`);

    // 判断滑动方向
    if (Math.abs(deltaX) > Math.abs(deltaY)) {
        if (deltaX > 0) {
            console.log('向右滑动');
        } else {
            console.log('向左滑动');
        }
    } else {
        if (deltaY > 0) {
            console.log('向下滑动');
        } else {
            console.log('向上滑动');
        }
    }
});