@whitesev/domutils 1.9.10 → 1.9.12

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "@whitesev/domutils",
-  "version": "1.9.10",
+  "version": "1.9.12",
   "description": "适合在浏览器中操作DOM的常用工具类",
   "keywords": [
     "typescript",
@@ -32,26 +32,26 @@
     "registry": "https://registry.npmjs.org/"
   },
   "devDependencies": {
-    "@eslint/js": "^9.39.2",
-    "@rollup/plugin-commonjs": "^29.0.1",
+    "@eslint/js": "^10.0.1",
+    "@rollup/plugin-commonjs": "^29.0.2",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
-    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-terser": "^1.0.0",
     "@rollup/plugin-typescript": "^12.3.0",
     "browserslist": "^4.28.1",
-    "caniuse-lite": "^1.0.30001776",
-    "eslint": "^9.39.2",
+    "caniuse-lite": "^1.0.30001781",
+    "eslint": "^10.1.0",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-compat": "^6.0.2",
+    "eslint-plugin-compat": "^7.0.1",
     "eslint-plugin-prettier": "^5.5.5",
-    "globals": "^16.5.0",
-    "oxfmt": "^0.36.0",
-    "oxlint": "1.51.0",
-    "rollup": "^4.54.0",
+    "globals": "^17.4.0",
+    "oxfmt": "^0.42.0",
+    "oxlint": "1.57.0",
+    "rollup": "^4.60.0",
     "rollup-plugin-clear": "^2.0.7",
     "tslib": "^2.8.1",
-    "typescript": "^5.9.3",
-    "typescript-eslint": "^8.50.1"
+    "typescript": "^6.0.2",
+    "typescript-eslint": "^8.57.2"
   },
   "scripts": {
     "lint": "oxlint .",

package/src/ElementEvent.ts

@@ -49,7 +49,7 @@ class ElementEvent extends ElementAnimate {
    *    console.log("事件触发",event)
    * })
    */
-  on<T extends DOMUtils_EventType>(
+  on<T extends DOMUtils_EventType = DOMUtils_EventType>(
     element: DOMUtilsElementEventType,
     eventType: T | T[],
     handler: <E extends HTMLElement = HTMLElement>(this: E, event: DOMUtils_Event[T]) => void,
@@ -73,7 +73,7 @@ class ElementEvent extends ElementAnimate {
    *    console.log("事件触发",event)
    * })
    */
-  on<T extends Event>(
+  on<T extends Event = Event>(
     element: DOMUtilsElementEventType,
     eventType: string | string[],
     handler: <E extends HTMLElement = HTMLElement>(this: E, event: T) => void,
@@ -103,7 +103,7 @@ class ElementEvent extends ElementAnimate {
    *    console.log("事件触发", event, $selector)
    * })
    */
-  on<T extends DOMUtils_EventType>(
+  on<T extends DOMUtils_EventType = DOMUtils_EventType>(
     element: DOMUtilsElementEventType,
     eventType: T | T[],
     selector: string | string[] | undefined | null,
@@ -134,14 +134,14 @@ class ElementEvent extends ElementAnimate {
    *    console.log("事件触发", event, $selector)
    * })
    */
-  on<T extends Event>(
+  on<T extends Event = Event>(
     element: DOMUtilsElementEventType,
     eventType: string | string[],
     selector: string | string[] | undefined | null,
     handler: <E extends HTMLElement = HTMLElement>(this: E, event: T, $selector: E) => void,
     option?: DOMUtilsEventListenerOption | boolean
   ): DOMUtilsAddEventListenerResult;
-  on<T extends Event>(
+  on<T extends Event = Event>(
     element: HTMLElement | string | NodeList | HTMLElement[] | Window | Document | Element | null | typeof globalThis,
     eventType: DOMUtils_EventType | DOMUtils_EventType[] | string | string[],
     selector:
@@ -241,89 +241,94 @@ class ElementEvent extends ElementAnimate {
       // 这是存在selector的情况
       listenerOption = getOption(args, 4, listenerOption);
     }
-    /**
-     * 如果是once，那么删除该监听和元素上的事件和监听
-     */
-    const checkOptionOnceToRemoveEventListener = ($el: DOMUtilsElementEventType) => {
-      if (listenerOption.once) {
-        this.off($el, eventTypeList, selector as any, callback as any, option);
-      }
-    };
     $elList.forEach(($elItem) => {
-      /**
-       * 事件回调
-       * @param event
-       */
-      const handlerCallBack = function (event: Event) {
-        let call_this: Element | undefined = void 0;
-        let call_event: Event | undefined = void 0;
-        let call_$selector: HTMLElement | undefined = void 0;
-        let execCallback = false;
-        if (selectorList.length) {
-          // 存在子元素选择器
-          // 这时候的this和target都是子元素选择器的元素
-          let $target: HTMLElement;
-          if (listenerOption.isComposedPath) {
-            // 可能为空
-            const composedPath = event.composedPath();
-            if (!composedPath.length && event.target) {
-              composedPath.push(event.target);
-            }
-            $target = composedPath[0] as HTMLElement;
-          } else {
-            $target = event.target as HTMLElement;
-          }
-          let $parent = $elItem;
-          if (CommonUtils.isWin($parent)) {
-            // window和document共用一个对象
-            // 这样就能处理子元素选择器无法匹配的问题
-            $parent = that.windowApi.document.documentElement;
+      // 遍历事件名设置元素事件
+      eventTypeList.forEach((eventName) => {
+        /**
+         * 如果是option.once，那么删除该监听和元素上的事件和监听
+         */
+        const checkOptionOnceToRemoveEventListener = () => {
+          if (listenerOption.once) {
+            this.off($elItem, eventName, selector as any, callback as any, option);
           }
-          const findValue = selectorList.find((selectors) => {
-            // 判断目标元素是否匹配选择器
-            if (that.matches($target, selectors)) {
-              // 当前目标可以被selector所匹配到
-              return true;
+        };
+        /**
+         * 事件回调
+         * @param event
+         */
+        const handlerCallBack = function (event: Event) {
+          let call_this: Element | undefined = void 0;
+          let call_event: Event | undefined = void 0;
+          let call_$selector: HTMLElement | undefined = void 0;
+          let execCallback = false;
+          if (selectorList.length) {
+            // 存在子元素选择器
+            // 这时候的this和target都是子元素选择器的元素
+            let $target: HTMLElement;
+            if (listenerOption.isComposedPath) {
+              // 可能为空
+              const composedPath = event.composedPath();
+              if (!composedPath.length && event.target) {
+                composedPath.push(event.target);
+              }
+              $target = composedPath[0] as HTMLElement;
+            } else {
+              $target = event.target as HTMLElement;
             }
-            // 在上层与主元素之间寻找可以被selector所匹配到的
-            const $closestMatches = that.closest<HTMLElement>($target, selectors);
-            if ($closestMatches && (<HTMLElement>$parent)?.contains?.($closestMatches)) {
-              $target = $closestMatches;
-              return true;
+            let $parent = $elItem;
+            if (CommonUtils.isWin($parent)) {
+              // window和document共用一个对象
+              // 这样就能处理子元素选择器无法匹配的问题
+              $parent = that.windowApi.document.documentElement;
             }
-            return false;
-          });
-          if (findValue) {
-            // 这里尝试使用defineProperty修改event的target值
-            try {
-              OriginPrototype.Object.defineProperty(event, "target", {
-                get() {
-                  return $target;
-                },
-              });
-              // oxlint-disable-next-line no-empty
-            } catch {}
+            const findValue = selectorList.find((selectors) => {
+              // 判断目标元素是否匹配选择器
+              if (that.matches($target, selectors)) {
+                // 当前目标可以被selector所匹配到
+                return true;
+              }
+              // 在上层与主元素之间寻找可以被selector所匹配到的
+              const $closestMatches = that.closest<HTMLElement>($target, selectors);
+              if ($closestMatches && (<HTMLElement>$parent)?.contains?.($closestMatches)) {
+                $target = $closestMatches;
+                return true;
+              }
+              return false;
+            });
+            if (findValue) {
+              // 这里尝试使用defineProperty修改event的target值
+              const originTarget = event.target;
+              try {
+                OriginPrototype.Object.defineProperty(event, "target", {
+                  get() {
+                    return $target;
+                  },
+                });
+                OriginPrototype.Object.defineProperty(event, "originTarget", {
+                  get() {
+                    return originTarget;
+                  },
+                });
+                // oxlint-disable-next-line no-empty
+              } catch {}
+              execCallback = true;
+              call_this = $target;
+              call_event = event;
+              call_$selector = $target;
+            }
+          } else {
             execCallback = true;
-            call_this = $target;
+            call_this = $elItem as Element;
             call_event = event;
-            call_$selector = $target;
           }
-        } else {
-          execCallback = true;
-          call_this = $elItem as Element;
-          call_event = event;
-        }
-        if (execCallback) {
-          const result = listenerCallBack.call(call_this!, call_event!, call_$selector!);
-          checkOptionOnceToRemoveEventListener($elItem);
-          if (typeof result === "boolean" && !result) {
-            return false;
+          if (execCallback) {
+            const result = listenerCallBack.call(call_this!, call_event!, call_$selector!);
+            checkOptionOnceToRemoveEventListener();
+            if (typeof result === "boolean" && !result) {
+              return false;
+            }
           }
-        }
-      };
-
-      // 遍历事件名设置元素事件
-      eventTypeList.forEach((eventName) => {
+        };
         // add listener
         $elItem.addEventListener(eventName, handlerCallBack, listenerOption);
         // 获取对象上的事件
@@ -380,7 +385,7 @@ class ElementEvent extends ElementAnimate {
    * DOMUtils.off(document.querySelector("a.xx"),"click")
    * DOMUtils.off("a.xx","click")
    */
-  off<T extends DOMUtils_EventType>(
+  off<T extends DOMUtils_EventType = DOMUtils_EventType>(
     element: DOMUtilsElementEventType,
     eventType: T | T[],
     callback?: <E extends HTMLElement = HTMLElement>(this: E, event: DOMUtils_Event[T]) => void,
@@ -404,7 +409,7 @@ class ElementEvent extends ElementAnimate {
    * DOMUtils.off(document.querySelector("a.xx"),"click")
    * DOMUtils.off("a.xx","click")
    */
-  off<T extends Event>(
+  off<T extends Event = Event>(
     element: DOMUtilsElementEventType,
     eventType: string | string[],
     callback?: <E extends HTMLElement = HTMLElement>(this: E, event: T) => void,
@@ -429,7 +434,7 @@ class ElementEvent extends ElementAnimate {
    * DOMUtils.off(document.querySelector("a.xx"),"click tap hover")
    * DOMUtils.off("a.xx",["click","tap","hover"])
    */
-  off<T extends DOMUtils_EventType>(
+  off<T extends DOMUtils_EventType = DOMUtils_EventType>(
     element: DOMUtilsElementEventType,
     eventType: T | T[],
     selector?: string | string[] | undefined | null,
@@ -455,7 +460,7 @@ class ElementEvent extends ElementAnimate {
    * DOMUtils.off(document.querySelector("a.xx"),"click tap hover")
    * DOMUtils.off("a.xx",["click","tap","hover"])
    */
-  off<T extends Event>(
+  off<T extends Event = Event>(
     element: DOMUtilsElementEventType,
     eventType: string | string[],
     selector?: string | string[] | undefined | null,
@@ -467,7 +472,7 @@ class ElementEvent extends ElementAnimate {
       array: DOMUtilsEventListenerOptionsAttribute[]
     ) => boolean
   ): void;
-  off<T extends Event>(
+  off<T extends Event = Event>(
     element: HTMLElement | string | NodeList | HTMLElement[] | Window | Document | Element | null | typeof globalThis,
     eventType: DOMUtils_EventType | DOMUtils_EventType[] | string | string[],
     selector:
@@ -541,7 +546,11 @@ class ElementEvent extends ElementAnimate {
     /**
      * 事件的回调函数
      */
-    let listenerCallBack: (this: HTMLElement, event: T, $selector: HTMLElement) => void = callback as any;
+    let listenerCallBack: (this: HTMLElement, event: T, $selector: HTMLElement) => void = callback as (
+      this: HTMLElement,
+      event: Event,
+      $selector?: HTMLElement
+    ) => void | boolean;
 
     /**
      * 事件的配置
@@ -573,17 +582,20 @@ class ElementEvent extends ElementAnimate {
       } = Reflect.get($elItem, GlobalData.domEventSymbol) || {};
       eventTypeList.forEach((eventName) => {
         const handlers = elementEvents[eventName] || [];
-        const filterHandler = typeof filter === "function" ? handlers.filter(filter) : handlers;
-        for (let index = 0; index < filterHandler.length; index++) {
-          const handler = filterHandler[index];
+        // 过滤出需要删除的事件
+        const handlersFiltered = typeof filter === "function" ? handlers.filter(filter) : handlers;
+        for (let index = 0; index < handlersFiltered.length; index++) {
+          const handler = handlersFiltered[index];
+          // 过滤出的事件再根据下面的条件进行判断处理移除
+          // 1. callback内存地址必须相同
+          // 2. selector必须相同
+          // 3. option.capture必须相同
           let flag = true;
           if (flag && listenerCallBack && handler.callback !== listenerCallBack) {
-            // callback不同
             flag = false;
           }
           if (flag && selectorList.length && Array.isArray(handler.selector)) {
             if (JSON.stringify(handler.selector) !== JSON.stringify(selectorList)) {
-              // 子元素选择器不同
               flag = false;
             }
           }
@@ -592,14 +604,14 @@ class ElementEvent extends ElementAnimate {
             typeof handler.option.capture === "boolean" &&
             listenerOption.capture !== handler.option.capture
           ) {
-            // 事件的配置项不同
             flag = false;
           }
           if (flag) {
             $elItem.removeEventListener(eventName, handler.handlerCallBack, handler.option);
-            const findIndex = handlers.findIndex((item) => item === handler);
-            if (findIndex !== -1) {
-              handlers.splice(findIndex, 1);
+            for (let i = handlers.length - 1; i >= 0; i--) {
+              if (handlers[i] === handler) {
+                handlers.splice(i, 1);
+              }
             }
           }
         }