SOURCE

document.addEventListener('DOMContentLoaded', () => {
    const gestureArea = document.getElementById('gestureArea');

    // 记录手势起始和结束坐标
    let startX = 0, startY = 0, endX = 0, endY = 0;

    // 手势方向的回调函数
    const gestureCallbacks = {
        swipeLeft: () => alert('�� 向左滑动'),
        swipeRight: () => alert('�� 向右滑动'),
        swipeUp: () => alert('�� 向上滑动'),
        swipeDown: () => alert('�� 向下滑动'),
    };

    const judgeLength = 30

    // 判断手势方向
    function detectGesture() {
        const deltaX = endX - startX;
        const deltaY = endY - startY;

        // 判断滑动是否水平或垂直
        if (Math.abs(deltaX) > Math.abs(deltaY)) {
            // 水平滑动
            if (deltaX > judgeLength) gestureCallbacks.swipeRight();
            if (deltaX < -judgeLength) gestureCallbacks.swipeLeft();
        } else {
            // 垂直滑动
            if (deltaY > judgeLength) gestureCallbacks.swipeDown();
            if (deltaY < -judgeLength) gestureCallbacks.swipeUp();
        }
    }

    // 触摸事件 (移动端)
    gestureArea.addEventListener('touchstart', (e) => {
        startX = e.touches[0].clientX;
        startY = e.touches[0].clientY;
    });

    gestureArea.addEventListener('touchend', (e) => {
        endX = e.changedTouches[0].clientX;
        endY = e.changedTouches[0].clientY;
        detectGesture();
    });

    // 鼠标事件 (桌面端)
    gestureArea.addEventListener('mousedown', (e) => {
        startX = e.clientX;
        startY = e.clientY;
    });

    gestureArea.addEventListener('mouseup', (e) => {
        endX = e.clientX;
        endY = e.clientY;
        detectGesture();
    });
});

<div class="gesture-area" id="gestureArea">
	在此区域滑动，检测手势方向
</div>

.gesture-area {
    width: 300px;
    height: 200px;
    margin: 50px auto;
    border: 2px dashed #42b983;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    user-select: none;
    cursor: pointer;
    /* 禁止文本选择，提升拖拽体验 */
}