如何获取鼠标按下与抬起的位置并比较以实现幻灯片切换？

原代码存在两个核心问题，导致起始/结束位置无法正确对比：

1. 事件绑定错误：将结束逻辑绑定到了mousemove事件，而非鼠标抬起的mouseup事件，同时缺少触摸端的结束事件（touchend）绑定
2. 变量作用域问题：起始位置startPos是touchStart函数的局部变量，touchEnd无法访问该值

以下是修正后的完整实现：

1. 定义作用域变量保存起始位置 #

// 用模块级/闭包变量避免全局污染，可根据你的代码环境调整
let startPos = 0;

2. 修正事件绑定逻辑 #

sliderItem.forEach((slide, index) => {
    // 绑定鼠标/触摸开始事件
    slide.addEventListener('mousedown', touchStart);
    slide.addEventListener('touchstart', touchStart);
});

// 将移动、结束事件绑定到document，确保鼠标移出幻灯片仍能触发
function bindDragEvents() {
    document.addEventListener('mousemove', touchMove);
    document.addEventListener('touchmove', touchMove);
    document.addEventListener('mouseup', touchEnd);
    document.addEventListener('touchend', touchEnd);
}

function unbindDragEvents() {
    document.removeEventListener('mousemove', touchMove);
    document.removeEventListener('touchmove', touchMove);
    document.removeEventListener('mouseup', touchEnd);
    document.removeEventListener('touchend', touchEnd);
}

3. 完善位置获取与方向判断逻辑 #

function getPositionX(e){
    // 鼠标事件用clientX避免滚动影响，触摸事件取触摸点的clientX
    return e.type.includes('mouse') ? e.clientX : e.touches?.[0]?.clientX || 0;
}

function touchStart(e) {
    e.preventDefault(); // 阻止默认行为，避免页面滚动干扰
    startPos = getPositionX(e);
    bindDragEvents(); // 开始拖拽后绑定移动、结束事件
}

// 可选：实时拖拽反馈（按需保留）
function touchMove(e) {
    e.preventDefault();
    const currentPos = getPositionX(e);
    // 这里可添加幻灯片实时偏移的视觉反馈逻辑
}

function touchEnd(e) {
    const endPos = getPositionX(e);
    const diff = endPos - startPos;

    // 拖拽阈值过滤误触，可根据需求调整数值
    if (Math.abs(diff) > 30) {
        if (diff > 0) {
            // 向右拖拽，切换上一张幻灯片
            console.log('切换到上一张');
            // 替换为你的幻灯片切换逻辑
        } else {
            // 向左拖拽，切换下一张幻灯片
            console.log('切换到下一张');
            // 替换为你的幻灯片切换逻辑
        }
    }

    unbindDragEvents(); // 结束拖拽后解绑事件
}

关键优化说明 #

• 把mouseup/touchend绑定到document，解决鼠标移出幻灯片后无法触发结束事件的问题
• 添加拖拽阈值（30px），过滤微小的误触操作
• 修正鼠标位置获取为clientX，避免页面滚动导致的位置偏差
• 触摸事件中调用preventDefault()，阻止页面默认滚动行为干扰拖拽

内容的提问来源于stack exchange，提问作者Eniso