移动端Android中jQuery的touchstart/touchend与click事件冲突问题

核心问题1：e.preventDefault()直接阻断了click事件 #

在Android移动端浏览器中，触摸操作会触发一套事件序列：touchstart→touchend→click。如果在touchstart或touchend里调用e.preventDefault()，会直接中断这个序列，浏览器不会再触发后续的click事件——这就是你常规点击图片时click不生效的根本原因。

核心问题2：mousedownFired变量逻辑完全失效 #

因为click事件被阻断根本没机会执行，这个变量的判断逻辑完全起不到作用，而且变量名本身也不准确（这里处理的是触摸事件，不是鼠标mousedown事件）。

修复后的代码 #

let myTimeout;
let touchStarted = false;

$(document).on("touchstart", "figure img", (e) => {
    touchStarted = true;
    // 移除e.preventDefault()，避免阻断click事件序列
    myTimeout = setTimeout(function() {
        console.log("长按触发");
        touchStarted = false; // 触发长按后重置标记
    }, 5000);
});

$(document).on("touchend", "figure img", (e) => {
    clearTimeout(myTimeout);
    console.log("取消长按");
    // 短按（常规点击）判断：如果touchStarted为true，说明长按未触发
    if (touchStarted) {
        setTimeout(() => {
            // 加100ms延迟，避免和长按定时器的触发时机冲突
            if (touchStarted) {
                console.log("常规点击触发");
                touchStarted = false;
            }
        }, 100);
    }
});

// 保留click作为兜底，兼容非触摸场景
$(document).on("click", "figure img", (e) => {
    e.stopPropagation();
    if (!touchStarted) { // 避免触摸场景下重复触发
        console.log("兜底click触发");
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<section>
  <figure>
    <img id="demo" src="https://picsum.photos/536/354" />
  </figure>
</section>

额外优化说明 #

• 把老旧的jQuery 1.9.1替换为最新稳定版，提升移动端事件兼容性
• 将变量名改为touchStarted，语义更贴合触摸场景
• 在touchend中添加短延迟判断，避免长按定时器即将触发时被打断，导致误判为常规点击

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