触摸设备中pointerdown事件异常行为及长按功能问题排查

我来帮你搞定这两个触摸设备上的问题，先拆解下问题根源，再给你修复后的完整代码：

问题1：滚动时短按触发长按的原因 #

你当前的代码只在pointerup事件触发时清除定时器，但当用户触摸元素后立刻滚动页面，手指会离开目标元素，这时候pointerup事件可能不会在该元素上触发（因为手指已经移到页面其他区域），导致定时器没被清除，到时间就误触发了长按逻辑。另外，你没有处理指针移动的场景——用户如果是滑动滚动而非长按，也应该取消长按定时器。

问题2：滚动激活元素时样式被移除的原因 #

这个问题主要有两个诱因：

1. 触摸滚动时，若滚动距离较小，浏览器可能误触发click事件，而你的原click逻辑会在点击激活元素时移除样式；
2. 直接通过style.backgroundColor判断状态非常不可靠，浏览器会把颜色值转成RGB格式（比如dodgerblue会变成rgb(30, 144, 255)），导致你原有的字符串判断失效，进而触发错误的样式移除逻辑。

修复后的完整代码 #

我用CSS类管理激活状态，完善了长按事件的监听逻辑，同时优化了click事件的判断逻辑：

HTML（保持不变）

<div class="container">
    <div class="items"></div>
    <div class="items"></div>
    <div class="items"></div>
    <div class="items"></div>
    <div class="items"></div>
    <div class="items"></div>
    <div class="items"></div>
    <div class="items"></div>
    <div class="items"></div>
</div>

CSS（新增.active类管理激活状态）

body {
    background: rgb(31, 31, 31);
}
.container {
    text-align: center;
}
.items {
    height: 200px;
    width: 45%;
    display: inline-flex;
    background: #333;
    border-radius: 20px;
    margin: 2px;
    color: #999;
    transition: all 0.2s ease; /* 添加过渡效果让样式切换更流畅 */
}
.items.active {
    background-color: dodgerblue;
    color: #ddd;
}

JavaScript（重构后的核心逻辑）

const items = document.querySelectorAll(".items");

function longPress(el, timeout, callback) {
    let timer;
    let startX, startY;
    const MOVE_THRESHOLD = 5; // 超过这个像素距离，就判断用户是在滚动，取消长按

    // 统一清除定时器的工具函数
    const clearTimer = () => {
        if (timer) {
            clearTimeout(timer);
            timer = null;
        }
    };

    el.addEventListener("pointerdown", (e) => {
        if (e.buttons !== 1) return;
        // 记录触摸初始位置，用来判断是否是滚动行为
        startX = e.clientX;
        startY = e.clientY;
        // 启动长按定时器
        timer = setTimeout(() => {
            callback(e, el);
        }, timeout);
    });

    // 指针移动时，判断位移是否超过阈值，超过则取消长按
    el.addEventListener("pointermove", (e) => {
        const moveX = Math.abs(e.clientX - startX);
        const moveY = Math.abs(e.clientY - startY);
        if (moveX > MOVE_THRESHOLD || moveY > MOVE_THRESHOLD) {
            clearTimer();
        }
    });

    // 指针离开元素时，立即取消长按
    el.addEventListener("pointerleave", clearTimer);

    // 指针抬起时，取消长按
    el.addEventListener("pointerup", clearTimer);
}

// 给每个元素绑定事件
items.forEach(item => {
    // 绑定长按事件
    longPress(item, 1000, (ev, el) => {
        el.classList.toggle("active");
    });

    // 绑定点击事件
    item.addEventListener("click", (e) => {
        // 检查是否存在其他已激活的元素
        const hasActiveItem = Array.from(items).some(i => i.classList.contains("active") && i !== item);
        
        if (hasActiveItem) {
            // 有激活元素时，点击直接切换当前元素的激活状态
            item.classList.toggle("active");
        }
        // 没有激活元素时，点击不触发切换（保持长按激活的逻辑，若需要点击也能激活可去掉这个判断）
    });
});

关键修改点说明 #

1. 完善长按事件监听：新增pointermove和pointerleave事件，通过判断触摸位移阈值区分滚动和长按行为，彻底解决滚动时误触发长按的问题；
2. 用CSS类管理状态：避免直接操作style属性的字符串判断问题，状态判断更准确，样式维护更方便；
3. 优化click逻辑：基于类名判断激活状态，逻辑更清晰，同时避免了误触发样式移除的问题。

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