@whitesev/domutils 1.9.3 → 1.9.5

package/src/ElementEvent.ts

@@ -6,6 +6,8 @@ import type {
   DOMUtils_Event,
   DOMUtils_EventType,
   DOMUtilsAddEventListenerResult,
+  DOMUtilsDoubleClickHandler,
+  DOMUtilsDoubleClickHandlerWithSelector,
   DOMUtilsDoubleClickOption,
   DOMUtilsElementEventType,
   DOMUtilsEventListenerOption,
@@ -1398,7 +1400,7 @@ class ElementEvent extends ElementAnimate {
    * @param options 监听器的配置
    */
   onDoubleClick(
-    $el: DOMUtilsTargetElementType,
+    $el: DOMUtilsElementEventType,
     handler: (event: MouseEvent | PointerEvent | TouchEvent, option: DOMUtilsDoubleClickOption) => void | Promise<void>,
     options?: DOMUtilsEventListenerOption | boolean
   ): {
@@ -1411,10 +1413,14 @@ class ElementEvent extends ElementAnimate {
    * @param handler 处理的回调函数
    * @param options 监听器的配置
    */
-  onDoubleClick(
-    $el: DOMUtilsTargetElementType,
-    selector: string | string[] | undefined | null,
-    handler: (event: MouseEvent | PointerEvent | TouchEvent, option: DOMUtilsDoubleClickOption) => void | Promise<void>,
+  onDoubleClick<T = HTMLElement>(
+    $el: DOMUtilsElementEventType,
+    selector: string | string[],
+    handler: (
+      event: MouseEvent | PointerEvent | TouchEvent,
+      $selector: T,
+      option: DOMUtilsDoubleClickOption
+    ) => void | Promise<void>,
     options?: DOMUtilsEventListenerOption | boolean
   ): {
     off(): void;
@@ -1422,12 +1428,9 @@ class ElementEvent extends ElementAnimate {
   onDoubleClick(...args: any[]): {
     off(): void;
   } {
-    const $el: DOMUtilsTargetElementType = args[0];
+    const $el: DOMUtilsElementEventType = args[0];
     let selector: string | string[] | undefined | null = void 0;
-    let handler: (
-      event: MouseEvent | PointerEvent | TouchEvent,
-      option: DOMUtilsDoubleClickOption
-    ) => void | Promise<void>;
+    let handler: DOMUtilsDoubleClickHandler | DOMUtilsDoubleClickHandlerWithSelector;
     let options: DOMUtilsEventListenerOption | boolean | undefined;
     if (args.length === 2) {
       if (typeof args[1] === "function") {
@@ -1451,61 +1454,57 @@ class ElementEvent extends ElementAnimate {
       throw new Error("args length error");
     }
 
-    let $click: Element | null = null;
+    let clickMap = new WeakMap<Element, PointerEvent>();
     let isDoubleClick = false;
     let timer: number | undefined = void 0;
-    /** 是否是移动端点击 */
-    let isMobileTouch = false;
     /** 检测是否是单击的延迟时间 */
     const checkClickTime = 200;
 
-    const dblclick_handler = async (evt: MouseEvent | PointerEvent | TouchEvent, option: DOMUtilsDoubleClickOption) => {
-      if (evt.type === "dblclick" && isMobileTouch) {
-        // 禁止在移动端触发dblclick事件
-        return;
+    const dblclick_handler = (
+      evt: MouseEvent | PointerEvent | TouchEvent,
+      option: DOMUtilsDoubleClickOption,
+      $selector?: HTMLElement
+    ) => {
+      if ($selector) {
+        return (<DOMUtilsDoubleClickHandlerWithSelector>handler)(evt, $selector, option);
+      } else {
+        return (<DOMUtilsDoubleClickHandler>handler)(evt, option);
       }
-      await handler(evt, option);
     };
 
-    const dblClickListener = this.on(
-      $el,
-      "dblclick",
-      (evt) => {
-        this.preventEvent(evt);
-        dblclick_handler(evt, {
-          isDoubleClick: true,
-        });
-      },
-      options
-    );
-    const touchEndListener = this.on(
+    const pointerUpListener = this.on(
       $el,
       "pointerup",
       selector,
       (evt, $selector) => {
-        this.preventEvent(evt);
-        if (evt.pointerType === "touch") {
-          isMobileTouch = true;
-        }
+        // this.preventEvent(evt);
         clearTimeout(timer);
         timer = void 0;
-        if (isDoubleClick && $click === $selector) {
+        if (isDoubleClick && clickMap.has($selector as Element)) {
           isDoubleClick = false;
-          $click = null;
+          clickMap.delete($selector);
           /* 判定为双击 */
-          dblclick_handler(evt, {
-            isDoubleClick: true,
-          });
+          dblclick_handler(
+            evt,
+            {
+              isDoubleClick: true,
+            },
+            $selector
+          );
         } else {
           timer = setTimeout(() => {
             isDoubleClick = false;
             // 判断为单击
-            dblclick_handler(evt, {
-              isDoubleClick: false,
-            });
+            dblclick_handler(
+              evt,
+              {
+                isDoubleClick: false,
+              },
+              $selector
+            );
           }, checkClickTime);
           isDoubleClick = true;
-          $click = $selector;
+          clickMap.set($selector as Element, evt);
         }
       },
       options
@@ -1513,9 +1512,9 @@ class ElementEvent extends ElementAnimate {
 
     return {
       off() {
-        $click = null;
-        dblClickListener.off();
-        touchEndListener.off();
+        pointerUpListener.off();
+        // @ts-expect-error
+        clickMap = null;
       },
     };
   }

package/src/types/DOMUtilsEvent.d.ts

@@ -418,3 +418,20 @@ export declare type DOMUtilsDoubleClickOption = {
    */
   isDoubleClick: boolean;
 };
+
+/**
+ * 双击的处理函数
+ */
+export declare type DOMUtilsDoubleClickHandler = (
+  event: MouseEvent | PointerEvent | TouchEvent,
+  option: DOMUtilsDoubleClickOption
+) => void | Promise<void>;
+
+/**
+ * 双击的处理函数（传入了selector）
+ */
+export declare type DOMUtilsDoubleClickHandlerWithSelector<T = HTMLElement> = (
+  event: MouseEvent | PointerEvent | TouchEvent,
+  $selector: T,
+  option: DOMUtilsDoubleClickOption
+) => void | Promise<void>;