Skip to content

fix: 修改 useLonePress 在特殊设备、特殊情况下长按事件不触发问题 #2785

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
crazylxr merged 1 commit into from
Jun 2, 2025
Merged

fix: 修改 useLonePress 在特殊设备、特殊情况下长按事件不触发问题 #2785

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
119 changes: 85 additions & 34 deletions packages/hooks/src/useLongPress/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,6 @@ export interface Options {
onLongPressEnd?: (event: EventType) => void;
}

const touchSupported =
isBrowser &&
// @ts-ignore
('ontouchstart' in window || (window.DocumentTouch && document instanceof DocumentTouch));

function useLongPress(
onLongPress: (event: EventType) => void,
target: BasicTarget,
Expand All @@ -30,6 +25,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 hasMoveThreshold = !!(
(moveThreshold?.x && moveThreshold.x > 0) ||
(moveThreshold?.y && moveThreshold.y > 0)
Expand Down Expand Up @@ -60,7 +57,6 @@ function useLongPress(
clientY: event.touches[0].clientY,
};
}

if (event instanceof MouseEvent) {
return {
clientX: event.clientX,
Expand All @@ -73,64 +69,119 @@ function useLongPress(
return { clientX: 0, clientY: 0 };
}

const onStart = (event: EventType) => {
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;

if (hasMoveThreshold) {
const { clientX, clientY } = getClientPosition(event);
pervPositionRef.current.x = clientX;
pervPositionRef.current.y = clientY;
}
timerRef.current = setTimeout(() => {
onLongPressRef.current(event);
isTriggeredRef.current = true;
}, delay);
createTimer(event);
};

const onMove = (event: TouchEvent) => {
const onMouseDown = (event: MouseEvent) => {
if ((event as any)?.sourceCapabilities?.firesTouchEvents) return;

mousePressed.current = true;

if (hasMoveThreshold) {
pervPositionRef.current.x = event.clientX;
pervPositionRef.current.y = event.clientY;
}
createTimer(event);
};

const onMove = (event: EventType) => {
if (timerRef.current && overThreshold(event)) {
clearTimeout(timerRef.current);
timerRef.current = undefined;
}
};

const onEnd = (event: EventType, shouldTriggerClick: boolean = false) => {
const onTouchEnd = (event: TouchEvent) => {
if (!touchPressed.current) return;
touchPressed.current = false;

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;

if (timerRef.current) {
clearTimeout(timerRef.current);
timerRef.current = undefined;
}
if (shouldTriggerClick && !isTriggeredRef.current && onClickRef.current) {

if (isTriggeredRef.current) {
onLongPressEndRef.current?.(event);
} else if (onClickRef.current) {
onClickRef.current(event);
}
isTriggeredRef.current = false;
};

const onEndWithClick = (event: EventType) => onEnd(event, true);

if (!touchSupported) {
targetElement.addEventListener('mousedown', onStart);
targetElement.addEventListener('mouseup', onEndWithClick);
targetElement.addEventListener('mouseleave', onEnd);
if (hasMoveThreshold) targetElement.addEventListener('mousemove', onMove);
} else {
targetElement.addEventListener('touchstart', onStart);
targetElement.addEventListener('touchend', onEndWithClick);
if (hasMoveThreshold) targetElement.addEventListener('touchmove', onMove);
const onMouseLeave = (event: MouseEvent) => {
if (!mousePressed.current) return;
mousePressed.current = false;

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);

if (hasMoveThreshold) {
targetElement.addEventListener('mousemove', onMove);
targetElement.addEventListener('touchmove', onMove);
}

return () => {
if (timerRef.current) {
clearTimeout(timerRef.current);
isTriggeredRef.current = false;
}
if (!touchSupported) {
targetElement.removeEventListener('mousedown', onStart);
targetElement.removeEventListener('mouseup', onEndWithClick);
targetElement.removeEventListener('mouseleave', onEnd);
if (hasMoveThreshold) targetElement.removeEventListener('mousemove', onMove);
} else {
targetElement.removeEventListener('touchstart', onStart);
targetElement.removeEventListener('touchend', onEndWithClick);
if (hasMoveThreshold) targetElement.removeEventListener('touchmove', onMove);

targetElement.removeEventListener('mousedown', onMouseDown);
targetElement.removeEventListener('mouseup', onMouseUp);
targetElement.removeEventListener('mouseleave', onMouseLeave);
targetElement.removeEventListener('touchstart', onTouchStart);
targetElement.removeEventListener('touchend', onTouchEnd);

if (hasMoveThreshold) {
targetElement.removeEventListener('mousemove', onMove);
targetElement.removeEventListener('touchmove', onMove);
}
};
},
Expand Down