移动端长按事件和点击事件冲突怎么办？

Tr° 纳利提问于 2026-02-07 12:48:32 阅读 30

移动

我在移动端项目里给图片列表加长按删除功能，但发现长按触发的时候会同时触发点击事件。比如用户长按图片想删除，结果页面直接跳转到详情页了。

我用了touchstart设setTimeout，touchend清除的常规方法，但点击事件还是会被触发。代码大概是这样写的：


<div class="item" 
    ontouchstart="handleStart(event)"
    ontouchend="handleEnd(event)"
    onclick="navigateToDetail()">
    长按测试区域
</div>

试过给事件加stopPropagation也不行，有没有更好的实现方式？或者应该怎么调整事件监听顺序？

手势识别

我来解答赞 5 收藏

反馈

1 条解答

慕容金梅 Lv1

移动端长按事件和点击事件冲突确实是比较头疼的问题，特别是在你要触发自定义行为（比如删除）时，点击事件又不请自来。你用 touchstart 和 touchend 的方法是常规思路，但 onclick 依然触发，说明事件阻断没到位。

我一般的做法是：不要直接用 onclick，而是把点击行为也用 touchend 实现，并且通过一个标记位来判断是点击还是长按。这样可以完全控制流程，避免两者冲突。

下面是一个修改后的实现逻辑：

let pressTimer = null;

let isLongPress = false;



function handleStart(e) {

    isLongPress = false;

    pressTimer = setTimeout(() => {

        isLongPress = true;

        handleLongPress();

    }, 500); // 长按时间设为500ms

}



function handleEnd(e) {

    if (pressTimer) {

        clearTimeout(pressTimer);

        pressTimer = null;

    }



    if (!isLongPress) {

        handleTap();

    }

}



function handleLongPress() {

    // 执行删除或其他操作

    console.log('长按触发，执行删除操作');

}



function handleTap() {

    // 模拟点击跳转

    console.log('点击触发，跳转详情页');

    // navigateToDetail()

}

HTML部分改成这样：

<div class="item"

    ontouchstart="handleStart(event)"

    ontouchend="handleEnd(event)">

    长按测试区域

</div>

关键点在于：
1. 不用 onclick，自己控制点击逻辑
2. 用 isLongPress 标记判断是否触发了长按
3. 长按触发后，clearTimeout 保证点击不会执行

这样就能彻底避免点击和长按互相干扰的问题。另外，移动端 touch 事件有时候会有延迟，所以你也可以考虑引入 fastclick 或者使用更现代的 pointerEvent，但上面这种标记法已经能解决大多数问题。

如果后续你还要防止用户恶意快速重复点击，可以在 handleTap 里加防抖或者节流逻辑，防止注入攻击。

2026-02-07 12:50