fix: reintroduce hold detection to avoid unwanted single click (#348)

apps/readest-app/src/app/reader/utils/iframeEventHandlers.ts

@@ -1,13 +1,16 @@
 import {
   DISABLE_DOUBLE_CLICK_ON_MOBILE,
   DOUBLE_CLICK_INTERVAL_THRESHOLD_MS,
+  LONG_HOLD_THRESHOLD,
 } from '@/services/constants';
 import { getOSPlatform } from '@/utils/misc';
 
-let lastClickTime = 0;
 const doubleClickEnabled =
   !DISABLE_DOUBLE_CLICK_ON_MOBILE || !['android', 'ios'].includes(getOSPlatform());
 
+let lastClickTime = 0;
+let longHoldTimeout: ReturnType<typeof setTimeout> | null = null;
+
 export const handleKeydown = (bookKey: string, event: KeyboardEvent) => {
   if (['Backspace', 'ArrowDown', 'ArrowUp'].includes(event.key)) {
     event.preventDefault();
@@ -28,6 +31,10 @@ export const handleKeydown = (bookKey: string, event: KeyboardEvent) => {
 };
 
 export const handleMousedown = (bookKey: string, event: MouseEvent) => {
+  longHoldTimeout = setTimeout(() => {
+    longHoldTimeout = null;
+  }, LONG_HOLD_THRESHOLD);
+
   window.postMessage(
     {
       type: 'iframe-mousedown',
@@ -117,6 +124,11 @@ export const handleClick = (bookKey: string, event: MouseEvent) => {
       element = element.parentElement;
     }
 
+    // if long hold is detected, we don't want to send single click event
+    if (!longHoldTimeout) {
+      return;
+    }
+
     window.postMessage(
       {
         type: 'iframe-single-click',

apps/readest-app/src/services/constants.ts

@@ -400,3 +400,4 @@ export const DEFAULT_STORAGE_QUOTA: UserStorageQuota = {
 
 export const DOUBLE_CLICK_INTERVAL_THRESHOLD_MS = 250;
 export const DISABLE_DOUBLE_CLICK_ON_MOBILE = true;
+export const LONG_HOLD_THRESHOLD = 500;