refactor: useLongPress hooks 内部实现使用 pointer 事件替代 mouse/touch 事件 && 测试用例重写

ZephyrAndMoon · ZephyrAndMoon · commit 7255727ecbaa · 2025-06-05T10:16:33.000+08:00
diff --git a/packages/hooks/src/useLongPress/__tests__/index.test.ts b/packages/hooks/src/useLongPress/__tests__/index.test.ts
@@ -6,14 +6,29 @@ const mockCallback = jest.fn();
 const mockClickCallback = jest.fn();
 const mockLongPressEndCallback = jest.fn();
 
-let events = {};
+// 使用正确的类型定义events对象
+let events: Record<string, (event?: any) => void> = {};
+
 const mockTarget = {
   addEventListener: jest.fn((event, callback) => {
     events[event] = callback;
   }),
   removeEventListener: jest.fn((event) => {
     Reflect.deleteProperty(events, event);
   }),
+  setPointerCapture: jest.fn(),
+};
+
+// 模拟 PointerEvent
+const createPointerEvent = (type: string, pointerId = 1, clientX = 0, clientY = 0): PointerEvent => {
+  return {
+    type,
+    pointerId,
+    clientX,
+    clientY,
+    preventDefault: jest.fn(),
+    stopPropagation: jest.fn(),
+  } as unknown as PointerEvent;
 };
 
 const setup = (onLongPress: any, target, options?: Options) =>
@@ -22,6 +37,7 @@ const setup = (onLongPress: any, target, options?: Options) =>
 describe('useLongPress', () => {
   beforeEach(() => {
     jest.useFakeTimers();
+    jest.clearAllMocks();
   });
 
   afterEach(() => {
@@ -35,9 +51,19 @@ describe('useLongPress', () => {
       onLongPressEnd: mockLongPressEndCallback,
     });
     expect(mockTarget.addEventListener).toBeCalled();
-    events['mousedown']();
+
+    // 模拟 pointerdown 事件
+    const pointerDownEvent = createPointerEvent('pointerdown');
+    events.pointerdown(pointerDownEvent);
+    expect(mockTarget.setPointerCapture).toBeCalledWith(pointerDownEvent.pointerId);
+
+    // 延时触发长按
     jest.advanceTimersByTime(350);
-    events['mouseleave']();
+
+    // 模拟 pointercancel 事件
+    const pointerCancelEvent = createPointerEvent('pointercancel', pointerDownEvent.pointerId);
+    events.pointercancel(pointerCancelEvent);
+
     expect(mockCallback).toBeCalledTimes(1);
     expect(mockLongPressEndCallback).toBeCalledTimes(1);
     expect(mockClickCallback).toBeCalledTimes(0);
@@ -49,10 +75,21 @@ describe('useLongPress', () => {
       onLongPressEnd: mockLongPressEndCallback,
     });
     expect(mockTarget.addEventListener).toBeCalled();
-    events['mousedown']();
-    events['mouseup']();
-    events['mousedown']();
-    events['mouseup']();
+
+    // 第一次点击
+    const pointerDown1 = createPointerEvent('pointerdown', 1);
+    events.pointerdown(pointerDown1);
+
+    const pointerUp1 = createPointerEvent('pointerup', 1);
+    events.pointerup(pointerUp1);
+
+    // 第二次点击
+    const pointerDown2 = createPointerEvent('pointerdown', 2);
+    events.pointerdown(pointerDown2);
+
+    const pointerUp2 = createPointerEvent('pointerup', 2);
+    events.pointerup(pointerUp2);
+
     expect(mockCallback).toBeCalledTimes(0);
     expect(mockLongPressEndCallback).toBeCalledTimes(0);
     expect(mockClickCallback).toBeCalledTimes(2);
@@ -64,11 +101,22 @@ describe('useLongPress', () => {
       onLongPressEnd: mockLongPressEndCallback,
     });
     expect(mockTarget.addEventListener).toBeCalled();
-    events['mousedown']();
+
+    // 长按
+    const longPressDown = createPointerEvent('pointerdown', 1);
+    events.pointerdown(longPressDown);
     jest.advanceTimersByTime(350);
-    events['mouseup']();
-    events['mousedown']();
-    events['mouseup']();
+
+    const longPressUp = createPointerEvent('pointerup', 1);
+    events.pointerup(longPressUp);
+
+    // 点击
+    const clickDown = createPointerEvent('pointerdown', 2);
+    events.pointerdown(clickDown);
+
+    const clickUp = createPointerEvent('pointerup', 2);
+    events.pointerup(clickUp);
+
     expect(mockCallback).toBeCalledTimes(1);
     expect(mockLongPressEndCallback).toBeCalledTimes(1);
     expect(mockClickCallback).toBeCalledTimes(1);
@@ -81,19 +129,47 @@ describe('useLongPress', () => {
         y: 20,
       },
     });
-    expect(events['mousemove']).toBeDefined();
-    events['mousedown'](new MouseEvent('mousedown'));
-    events['mousemove'](
-      new MouseEvent('mousemove', {
-        clientX: 40,
-        clientY: 10,
-      }),
-    );
+    expect(events.pointermove).toBeDefined();
+
+    // 按下指针
+    const pointerDown = createPointerEvent('pointerdown', 1, 0, 0);
+    events.pointerdown(pointerDown);
+
+    // 移动超过阈值
+    const pointerMove = createPointerEvent('pointermove', 1, 40, 10);
+    events.pointermove(pointerMove);
+
     jest.advanceTimersByTime(320);
     expect(mockCallback).not.toBeCalled();
 
     unmount();
-    expect(events['mousemove']).toBeUndefined();
+    expect(events.pointermove).toBeUndefined();
+  });
+
+  it('should handle multiple pointer interactions correctly', () => {
+    setup(mockCallback, mockTarget);
+
+    // 第一个指针按下
+    const pointer1Down = createPointerEvent('pointerdown', 1);
+    events.pointerdown(pointer1Down);
+
+    // 第二个指针按下（应该被忽略）
+    const pointer2Down = createPointerEvent('pointerdown', 2);
+    events.pointerdown(pointer2Down);
+
+    jest.advanceTimersByTime(350);
+
+    // 第二个指针抬起（应该被忽略）
+    const pointer2Up = createPointerEvent('pointerup', 2);
+    events.pointerup(pointer2Up);
+
+    // 第一个指针抬起（应该触发结束事件）
+    const pointer1Up = createPointerEvent('pointerup', 1);
+    events.pointerup(pointer1Up);
+
+    expect(mockCallback).toBeCalledTimes(1);
+    expect(mockTarget.setPointerCapture).toBeCalledWith(1);
+    expect(mockTarget.setPointerCapture).toBeCalledTimes(1);
   });
 
   it(`should not work when target don't support addEventListener method`, () => {
@@ -103,7 +179,7 @@ describe('useLongPress', () => {
       },
     });
 
-    setup(() => {}, mockTarget);
+    setup(() => { }, mockTarget);
     expect(Object.keys(events)).toHaveLength(0);
   });
 });
diff --git a/packages/hooks/src/useLongPress/index.ts b/packages/hooks/src/useLongPress/index.ts
@@ -2,10 +2,9 @@ import { useRef } from 'react';
 import useLatest from '../useLatest';
 import type { BasicTarget } from '../utils/domTarget';
 import { getTargetElement } from '../utils/domTarget';
-import isBrowser from '../utils/isBrowser';
 import useEffectWithTarget from '../utils/useEffectWithTarget';
 
-type EventType = MouseEvent | TouchEvent;
+type EventType = PointerEvent;
 export interface Options {
   delay?: number;
   moveThreshold?: { x?: number; y?: number };
@@ -25,8 +24,8 @@ function useLongPress(
   const timerRef = useRef<ReturnType<typeof setTimeout>>();
   const isTriggeredRef = useRef(false);
   const pervPositionRef = useRef({ x: 0, y: 0 });
-  const mousePressed = useRef(false);
-  const touchPressed = useRef(false);
+  const isPressed = useRef(false);
+  const pointerId = useRef<number | null>(null);
   const hasMoveThreshold = !!(
     (moveThreshold?.x && moveThreshold.x > 0) ||
     (moveThreshold?.y && moveThreshold.y > 0)
@@ -40,94 +39,56 @@ function useLongPress(
       }
 
       const overThreshold = (event: EventType) => {
-        const { clientX, clientY } = getClientPosition(event);
-        const offsetX = Math.abs(clientX - pervPositionRef.current.x);
-        const offsetY = Math.abs(clientY - pervPositionRef.current.y);
+        const offsetX = Math.abs(event.clientX - pervPositionRef.current.x);
+        const offsetY = Math.abs(event.clientY - pervPositionRef.current.y);
 
         return !!(
           (moveThreshold?.x && offsetX > moveThreshold.x) ||
           (moveThreshold?.y && offsetY > moveThreshold.y)
         );
       };
 
-      function getClientPosition(event: EventType) {
-        if ('TouchEvent' in window && event instanceof TouchEvent) {
-          return {
-            clientX: event.touches[0].clientX,
-            clientY: event.touches[0].clientY,
-          };
-        }
-        if (event instanceof MouseEvent) {
-          return {
-            clientX: event.clientX,
-            clientY: event.clientY,
-          };
-        }
-
-        console.warn('Unsupported event type');
-
-        return { clientX: 0, clientY: 0 };
-      }
-
       const createTimer = (event: EventType) => {
         timerRef.current = setTimeout(() => {
           onLongPressRef.current(event);
           isTriggeredRef.current = true;
         }, delay);
       };
 
-      const onTouchStart = (event: TouchEvent) => {
-        if (touchPressed.current) return;
-        touchPressed.current = true;
+      const onPointerDown = (event: PointerEvent) => {
+        // 只处理第一个按下的指针
+        if (isPressed.current) return;
 
-        if (hasMoveThreshold) {
-          const { clientX, clientY } = getClientPosition(event);
-          pervPositionRef.current.x = clientX;
-          pervPositionRef.current.y = clientY;
-        }
-        createTimer(event);
-      };
+        isPressed.current = true;
+        pointerId.current = event.pointerId;
 
-      const onMouseDown = (event: MouseEvent) => {
-        if ((event as any)?.sourceCapabilities?.firesTouchEvents) return;
-
-        mousePressed.current = true;
+        // 捕获指针以确保即使指针移出元素也能接收到事件
+        targetElement.setPointerCapture(event.pointerId);
 
         if (hasMoveThreshold) {
           pervPositionRef.current.x = event.clientX;
           pervPositionRef.current.y = event.clientY;
         }
+
         createTimer(event);
       };
 
-      const onMove = (event: EventType) => {
+      const onPointerMove = (event: PointerEvent) => {
+        // 只处理已按下的指针
+        if (!isPressed.current || event.pointerId !== pointerId.current) return;
+
         if (timerRef.current && overThreshold(event)) {
           clearTimeout(timerRef.current);
           timerRef.current = undefined;
         }
       };
 
-      const onTouchEnd = (event: TouchEvent) => {
-        if (!touchPressed.current) return;
-        touchPressed.current = false;
+      const onPointerUp = (event: PointerEvent) => {
+        // 只处理已按下的指针
+        if (!isPressed.current || event.pointerId !== pointerId.current) return;
 
-        if (timerRef.current) {
-          clearTimeout(timerRef.current);
-          timerRef.current = undefined;
-        }
-
-        if (isTriggeredRef.current) {
-          onLongPressEndRef.current?.(event);
-        } else if (onClickRef.current) {
-          onClickRef.current(event);
-        }
-        isTriggeredRef.current = false;
-      };
-
-      const onMouseUp = (event: MouseEvent) => {
-        if ((event as any)?.sourceCapabilities?.firesTouchEvents) return;
-        if (!mousePressed.current) return;
-        mousePressed.current = false;
+        isPressed.current = false;
+        pointerId.current = null;
 
         if (timerRef.current) {
           clearTimeout(timerRef.current);
@@ -139,32 +100,34 @@ function useLongPress(
         } else if (onClickRef.current) {
           onClickRef.current(event);
         }
+
         isTriggeredRef.current = false;
       };
 
-      const onMouseLeave = (event: MouseEvent) => {
-        if (!mousePressed.current) return;
-        mousePressed.current = false;
+      const onPointerCancel = (event: PointerEvent) => {
+        // 只处理已按下的指针
+        if (!isPressed.current || event.pointerId !== pointerId.current) return;
+
+        isPressed.current = false;
+        pointerId.current = null;
 
         if (timerRef.current) {
           clearTimeout(timerRef.current);
           timerRef.current = undefined;
         }
+
         if (isTriggeredRef.current) {
           onLongPressEndRef.current?.(event);
           isTriggeredRef.current = false;
         }
       };
 
-      targetElement.addEventListener('mousedown', onMouseDown);
-      targetElement.addEventListener('mouseup', onMouseUp);
-      targetElement.addEventListener('mouseleave', onMouseLeave);
-      targetElement.addEventListener('touchstart', onTouchStart);
-      targetElement.addEventListener('touchend', onTouchEnd);
+      targetElement.addEventListener('pointerdown', onPointerDown);
+      targetElement.addEventListener('pointerup', onPointerUp);
+      targetElement.addEventListener('pointercancel', onPointerCancel);
 
       if (hasMoveThreshold) {
-        targetElement.addEventListener('mousemove', onMove);
-        targetElement.addEventListener('touchmove', onMove);
+        targetElement.addEventListener('pointermove', onPointerMove);
       }
 
       return () => {
@@ -173,15 +136,12 @@ function useLongPress(
           isTriggeredRef.current = false;
         }
 
-        targetElement.removeEventListener('mousedown', onMouseDown);
-        targetElement.removeEventListener('mouseup', onMouseUp);
-        targetElement.removeEventListener('mouseleave', onMouseLeave);
-        targetElement.removeEventListener('touchstart', onTouchStart);
-        targetElement.removeEventListener('touchend', onTouchEnd);
+        targetElement.removeEventListener('pointerdown', onPointerDown);
+        targetElement.removeEventListener('pointerup', onPointerUp);
+        targetElement.removeEventListener('pointercancel', onPointerCancel);
 
         if (hasMoveThreshold) {
-          targetElement.removeEventListener('mousemove', onMove);
-          targetElement.removeEventListener('touchmove', onMove);
+          targetElement.removeEventListener('pointermove', onPointerMove);
         }
       };
     },
