jQuery实现长按功能时如何避免同时触发点击事件？

问题核心是浏览器事件触发顺序导致的：长按操作结束后，mouseup/touchend事件触发后仍会触发click事件（事件序列为mousedown → mouseup → click）。我们需要通过状态标记区分普通点击和长按后的松开行为，避免长按触发点击逻辑。

修改方案 #

1. 添加状态变量标记是否触发过长按
2. 在长按回调中标记状态
3. 在点击事件中根据状态决定是否执行点击逻辑
4. 在松开/离开事件中合理重置状态

修改后的代码：

// 声明局部变量，避免污染全局作用域
let LongPressTimer;
let isLongPressed = false;

$('#button').on('click', function(e) {
  e.preventDefault();
  // 若已触发长按，重置标记并终止点击逻辑执行
  if (isLongPressed) {
    isLongPressed = false;
    return;
  }
  CLICK();
});

$('#button').on('mousedown touchstart', function() {
    LongPressTimer = setTimeout(function() {
      LONGPRESS();
      // 触发长按时标记状态
      isLongPressed = true;
    }, 1000)
  })
  .on('mouseup mouseleave touchend', function(e) {
    e.preventDefault();
    e.stopPropagation();
    clearTimeout(LongPressTimer);
    // 未触发长按（点击时长不足1秒）时重置标记
    if (!isLongPressed) {
      isLongPressed = false;
    }
  });

逻辑说明 #

• 当用户长按超过1秒触发LONGPRESS()时，isLongPressed会被设为true
• 松开按钮后触发的click事件会检测到这个标记，直接终止点击逻辑，同时重置标记保证后续操作正常
• 普通短点击时，isLongPressed始终为false，点击逻辑正常执行

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