div中Pointer事件与onClick的关联及鼠标触摸行为差异问题

行为差异原因 #

• 触摸操作：当长按元素超过一定时间（通常几百毫秒），浏览器会判定这是触摸长按操作，自动取消后续的click事件触发，避免和普通点击混淆。
• 鼠标操作：浏览器的鼠标事件序列是mousedown→mouseup→click，哪怕长按后松开鼠标，只要完成mouseup就会触发click，不会自动取消。

解决方案 #

可以通过记录操作时长（或标记长按状态），在click事件触发时判断是否属于长按，从而跳过默认的点击逻辑。这里提供两种实现方式：

方式一：通过时间戳判断操作时长 #

let touchTapTimer: ReturnType<typeof setTimeout>;
let pointerDownTime: number;

const setSelectMode = (e: PointerEvent) => {
   // 你的长按处理逻辑
};

const handleScroll = () => {
   clearTimeout(touchTapTimer);
};

const handlePointerDown = (e: PointerEvent) => {
   pointerDownTime = Date.now();
   touchTapTimer = setTimeout(() => setSelectMode(e), 800);
   window.addEventListener('scroll', handleScroll);
};

const handlePointerUp = (e) => {
   clearTimeout(touchTapTimer);
   window.removeEventListener('scroll', handleScroll); 
};

const selectItem = () => {
   // 计算从按下到松开的时长，超过800ms则不执行默认逻辑
   const duration = Date.now() - pointerDownTime;
   if (duration >= 800) return;
   // 你的默认点击处理逻辑
}

divRef.addEventListener('pointerdown', handlePointerDown);
divRef.addEventListener('pointerup', handlePointerUp);

方式二：通过标记位判断是否为长按 #

let touchTapTimer: ReturnType<typeof setTimeout>;
let isLongPress = false;

const setSelectMode = (e: PointerEvent) => {
   isLongPress = true;
   // 你的长按处理逻辑
};

const handleScroll = () => {
   clearTimeout(touchTapTimer);
   isLongPress = false;
};

const handlePointerDown = (e: PointerEvent) => {
   isLongPress = false;
   touchTapTimer = setTimeout(() => setSelectMode(e), 800);
   window.addEventListener('scroll', handleScroll);
};

const handlePointerUp = (e) => {
   clearTimeout(touchTapTimer);
   window.removeEventListener('scroll', handleScroll); 
};

const selectItem = () => {
   if (isLongPress) {
      isLongPress = false; // 重置标记，避免影响下一次操作
      return;
   }
   // 你的默认点击处理逻辑
}

注意事项 #

• 两种方案都能让鼠标长按和触摸长按行为保持一致，不触发onClick的默认逻辑。
• 务必在pointerdown或scroll时重置标记/时间戳，防止残留状态干扰后续操作。

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