解决滑块拖拽结束后触发点击事件的问题

问题描述 #

实现了带可点击项的底部滑块拖拽功能，但拖拽停止后会触发mousedown所在滑块项的点击动作。尝试给内部项添加pointer-events: none后，拖拽功能完全失效，需要解决这个矛盾。

解决方案 #

核心思路是区分拖拽和点击行为：通过记录拖拽的移动距离，只有当拖拽距离超过阈值时，才阻止后续的点击事件，既保留拖拽功能，又避免误触发点击。

修改后的完整代码如下：

let isDown = false;
let startX;
let scrollLeft;
let draggedDistance = 0;
let shouldPreventClick = false;
const slider = document.querySelector('.items');

const end = () => {
    isDown = false;
    slider.classList.remove('active');
    // 拖拽距离超过5px则标记需要阻止点击
    shouldPreventClick = draggedDistance > 5;
    draggedDistance = 0;
    // 延迟重置标记，避免影响正常点击
    setTimeout(() => {
        shouldPreventClick = false;
    }, 100);
}

const start = (e) => {
    isDown = true;
    slider.classList.add('active');
    startX = e.pageX || e.touches[0].pageX - slider.offsetLeft;
    scrollLeft = slider.scrollLeft;   
}

const move = (e) => {
    if(!isDown) return;
    e.preventDefault();
    const x = e.pageX || e.touches[0].pageX - slider.offsetLeft;
    const dist = (x - startX);
    draggedDistance = Math.abs(dist); // 记录拖拽的绝对距离
    slider.scrollLeft = scrollLeft - dist;
}

(() => {
    slider.addEventListener('mousedown', start);
    slider.addEventListener('touchstart', start);

    slider.addEventListener('mousemove', move);
    slider.addEventListener('touchmove', move);

    slider.addEventListener('mouseleave', end);
    slider.addEventListener('mouseup', end);
    slider.addEventListener('touchend', end);

    // 捕获阶段监听click事件，提前判断是否阻止
    slider.addEventListener('click', (e) => {
        if (shouldPreventClick) {
            e.preventDefault();
            e.stopPropagation();
        }
    }, true);
})();

关键说明 #

1. 拖拽距离判断：通过draggedDistance记录拖拽的绝对移动距离，当距离超过5px（可根据需求调整阈值）时，判定为有效拖拽，标记需要阻止后续点击。
2. 点击事件拦截：在滑块的捕获阶段监听click事件，确保在内部项的click事件触发前就执行拦截逻辑，阻止默认行为和事件冒泡。
3. 标记延迟重置：用setTimeout延迟重置shouldPreventClick，避免快速操作时误阻止正常点击。

之前使用pointer-events: none失效的原因是：该属性会让内部元素无法接收任何指针事件，导致拖拽所需的mousedown/touchstart事件无法正常触发到滑块，因此不可行。

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