如何在不使用setTimeout的情况下避免双击触发单击事件

你提到的问题确实很常见——用e.detail区分单双击时，双击会先触发一次单击（因为第一次点击的detail是1），而用setTimeout又会导致鼠标移动在延迟期间被阻塞。下面给你一个不用定时器、纯基于事件追踪的解决方案：

核心思路 #

我们可以通过追踪鼠标按下到抬起的间隔以及连续两次点击的间隔来判断是单击还是双击，同时确保鼠标移动事件不会被任何延迟逻辑阻塞。

实现代码 #

let lastClickTime = 0;
let isMouseDown = false;

const handleMouseDown = (e) => {
  isMouseDown = true;
  const currentTime = Date.now();
  const timeSinceLastClick = currentTime - lastClickTime;

  // 判断是否是双击：两次点击间隔小于200ms（可根据需求调整）
  if (timeSinceLastClick < 200 && timeSinceLastClick > 0) {
    console.log('Double Click');
    // 重置上次点击时间，避免触发第三次点击的误判
    lastClickTime = 0;
  } else {
    // 先记录点击时间，等待鼠标抬起后再判断是否为单击
    lastClickTime = currentTime;
  }
};

const handleMouseUp = (e) => {
  if (!isMouseDown) return;
  isMouseDown = false;
  const currentTime = Date.now();
  const timeSinceLastClick = currentTime - lastClickTime;

  // 如果抬起时，距离上次点击超过200ms，且没有触发双击，判定为单击
  if (timeSinceLastClick >= 200 || lastClickTime === 0) {
    if (lastClickTime !== 0) {
      console.log('Single Click');
    }
    lastClickTime = 0;
  }
};

const handleMouseMove = (e) => {
  // 这里的逻辑不会被任何延迟阻塞，正常执行
  console.log('Mouse Moving:', e.clientX, e.clientY);
};

// 绑定事件
document.addEventListener('mousedown', handleMouseDown);
document.addEventListener('mouseup', handleMouseUp);
document.addEventListener('mousemove', handleMouseMove);

原理说明 #

• 追踪点击间隔：通过lastClickTime记录每次按下鼠标的时间，当第二次按下时，如果间隔小于设定阈值（比如200ms），直接判定为双击，并重置时间避免后续误判。
• 分离按下与抬起逻辑：单击的判定放在mouseup事件中，只有当鼠标抬起时，距离上次按下的时间超过阈值，且没有触发过双击，才执行单击逻辑。
• 无阻塞鼠标移动：整个逻辑没有使用setTimeout，鼠标移动事件可以实时响应，完全不会被延迟影响。

额外优化点 #

• 可以根据需求调整双击的时间阈值（比如200ms到300ms之间，符合系统默认的双击间隔）。
• 如果需要针对特定元素绑定事件，只需把document换成对应的DOM元素即可。

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