@whitesev/domutils 1.9.7 → 1.9.10

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-const version = "1.9.6";
+const version = "1.9.10";
 
 class WindowApi {
     /** 默认的配置 */
@@ -535,7 +535,6 @@ class Utils {
                 "is",
                 "jquery",
                 "keydown",
-                "keypress",
                 "keyup",
                 "last",
                 "load",
@@ -1379,7 +1378,7 @@ class ElementEvent extends ElementAnimate {
          * @param startIndex
          * @param option
          */
-        function getOption(args, startIndex, option) {
+        const getOption = function (args, startIndex, option) {
             const currentParam = args[startIndex];
             if (typeof currentParam === "boolean") {
                 option.capture = currentParam;
@@ -1401,7 +1400,7 @@ class ElementEvent extends ElementAnimate {
                 option.isComposedPath = currentParam.isComposedPath;
             }
             return option;
-        }
+        };
         const that = this;
         // eslint-disable-next-line prefer-rest-params
         const args = arguments;
@@ -1459,39 +1458,52 @@ class ElementEvent extends ElementAnimate {
         /**
          * 如果是once，那么删除该监听和元素上的事件和监听
          */
-        const checkOptionOnceToRemoveEventListener = () => {
+        const checkOptionOnceToRemoveEventListener = ($el) => {
             if (listenerOption.once) {
-                that.off(element, eventType, selector, callback, option);
+                this.off($el, eventTypeList, selector, callback, option);
             }
         };
-        $elList.forEach((elementItem) => {
+        $elList.forEach(($elItem) => {
             /**
              * 事件回调
              * @param event
              */
             const handlerCallBack = function (event) {
+                let call_this = void 0;
+                let call_event = void 0;
+                let call_$selector = void 0;
+                let execCallback = false;
                 if (selectorList.length) {
-                    /* 存在子元素选择器 */
+                    // 存在子元素选择器
                     // 这时候的this和target都是子元素选择器的元素
-                    let eventTarget = listenerOption.isComposedPath
-                        ? event.composedPath()[0]
-                        : event.target;
-                    let totalParent = elementItem;
-                    if (CommonUtils.isWin(totalParent)) {
-                        if (totalParent === that.windowApi.document) {
-                            totalParent = that.windowApi.document.documentElement;
+                    let $target;
+                    if (listenerOption.isComposedPath) {
+                        // 可能为空
+                        const composedPath = event.composedPath();
+                        if (!composedPath.length && event.target) {
+                            composedPath.push(event.target);
                         }
+                        $target = composedPath[0];
                     }
-                    const findValue = selectorList.find((selectorItem) => {
+                    else {
+                        $target = event.target;
+                    }
+                    let $parent = $elItem;
+                    if (CommonUtils.isWin($parent)) {
+                        // window和document共用一个对象
+                        // 这样就能处理子元素选择器无法匹配的问题
+                        $parent = that.windowApi.document.documentElement;
+                    }
+                    const findValue = selectorList.find((selectors) => {
                         // 判断目标元素是否匹配选择器
-                        if (that.matches(eventTarget, selectorItem)) {
-                            /* 当前目标可以被selector所匹配到 */
+                        if (that.matches($target, selectors)) {
+                            // 当前目标可以被selector所匹配到
                             return true;
                         }
-                        /* 在上层与主元素之间寻找可以被selector所匹配到的 */
-                        const $closestMatches = that.closest(eventTarget, selectorItem);
-                        if ($closestMatches && totalParent?.contains?.($closestMatches)) {
-                            eventTarget = $closestMatches;
+                        // 在上层与主元素之间寻找可以被selector所匹配到的
+                        const $closestMatches = that.closest($target, selectors);
+                        if ($closestMatches && $parent?.contains?.($closestMatches)) {
+                            $target = $closestMatches;
                             return true;
                         }
                         return false;
@@ -1501,29 +1513,38 @@ class ElementEvent extends ElementAnimate {
                         try {
                             OriginPrototype.Object.defineProperty(event, "target", {
                                 get() {
-                                    return eventTarget;
+                                    return $target;
                                 },
                             });
+                            // oxlint-disable-next-line no-empty
                         }
-                        catch {
-                            // TODO
-                        }
-                        listenerCallBack.call(eventTarget, event, eventTarget);
-                        checkOptionOnceToRemoveEventListener();
+                        catch { }
+                        execCallback = true;
+                        call_this = $target;
+                        call_event = event;
+                        call_$selector = $target;
                     }
                 }
                 else {
-                    // 这时候的this指向监听的元素
-                    listenerCallBack.call(elementItem, event);
-                    checkOptionOnceToRemoveEventListener();
+                    execCallback = true;
+                    call_this = $elItem;
+                    call_event = event;
+                }
+                if (execCallback) {
+                    const result = listenerCallBack.call(call_this, call_event, call_$selector);
+                    checkOptionOnceToRemoveEventListener($elItem);
+                    if (typeof result === "boolean" && !result) {
+                        return false;
+                    }
                 }
             };
-            /* 遍历事件名设置元素事件 */
+            // 遍历事件名设置元素事件
             eventTypeList.forEach((eventName) => {
-                elementItem.addEventListener(eventName, handlerCallBack, listenerOption);
-                /* 获取对象上的事件 */
-                const elementEvents = Reflect.get(elementItem, GlobalData.domEventSymbol) || {};
-                /* 初始化对象上的xx事件 */
+                // add listener
+                $elItem.addEventListener(eventName, handlerCallBack, listenerOption);
+                // 获取对象上的事件
+                const elementEvents = Reflect.get($elItem, GlobalData.domEventSymbol) || {};
+                // 初始化对象上的xx事件
                 elementEvents[eventName] = elementEvents[eventName] || [];
                 elementEvents[eventName].push({
                     selector: selectorList,
@@ -1531,8 +1552,8 @@ class ElementEvent extends ElementAnimate {
                     handlerCallBack: handlerCallBack,
                     callback: listenerCallBack,
                 });
-                /* 覆盖事件 */
-                Reflect.set(elementItem, GlobalData.domEventSymbol, elementEvents);
+                // 覆盖事件
+                Reflect.set($elItem, GlobalData.domEventSymbol, elementEvents);
             });
         });
         return {
@@ -1546,7 +1567,7 @@ class ElementEvent extends ElementAnimate {
             /**
              * 主动触发事件
              * @param extraDetails 赋予触发的Event的额外属性，如果是Event类型，那么将自动代替默认new的Event对象
-             * @param useDispatchToTriggerEvent 是否使用dispatchEvent来触发事件，默认true，如果为false，则直接调用callback，但是这种会让使用了$selector的没有值
+             * @param useDispatchToTriggerEvent 是否使用dispatchEvent来触发事件，默认true，如果为false，则直接调用callback，但是这种会让使用了`$selector`的没有值
              */
             emit: (extraDetails, useDispatchToTriggerEvent) => {
                 that.emit($elList, eventTypeList, extraDetails, useDispatchToTriggerEvent);
@@ -1560,7 +1581,7 @@ class ElementEvent extends ElementAnimate {
          * @param startIndex
          * @param option
          */
-        function getOption(args1, startIndex, option) {
+        const getOption = function (args1, startIndex, option) {
             const currentParam = args1[startIndex];
             if (typeof currentParam === "boolean") {
                 option.capture = currentParam;
@@ -1569,7 +1590,7 @@ class ElementEvent extends ElementAnimate {
                 option.capture = currentParam.capture;
             }
             return option;
-        }
+        };
         const that = this;
         // eslint-disable-next-line prefer-rest-params
         const args = arguments;
@@ -1622,22 +1643,12 @@ class ElementEvent extends ElementAnimate {
             // 这是存在selector的情况
             listenerOption = getOption(args, 4, listenerOption);
         }
-        // 是否移除所有事件
-        let isRemoveAll = false;
-        if (args.length === 2) {
-            // 目标函数、事件名
-            isRemoveAll = true;
-        }
-        else if ((args.length === 3 && typeof args[2] === "string") || Array.isArray(args[2])) {
-            // 目标函数、事件名、子元素选择器
-            isRemoveAll = true;
-        }
         if (args.length === 5 && typeof args[4] === "function" && typeof filter !== "function") {
             // 目标函数、事件名、回调函数、事件配置、过滤函数
             filter = option;
         }
         $elList.forEach(($elItem) => {
-            /* 获取对象上的事件 */
+            // 获取对象上的事件
             const elementEvents = Reflect.get($elItem, GlobalData.domEventSymbol) || {};
             eventTypeList.forEach((eventName) => {
                 const handlers = elementEvents[eventName] || [];
@@ -1661,7 +1672,7 @@ class ElementEvent extends ElementAnimate {
                         // 事件的配置项不同
                         flag = false;
                     }
-                    if (flag || isRemoveAll) {
+                    if (flag) {
                         $elItem.removeEventListener(eventName, handler.handlerCallBack, handler.option);
                         const findIndex = handlers.findIndex((item) => item === handler);
                         if (findIndex !== -1) {
@@ -1670,7 +1681,7 @@ class ElementEvent extends ElementAnimate {
                     }
                 }
                 if (handlers.length === 0) {
-                    /* 如果没有任意的handler，那么删除该属性 */
+                    // 如果没有任意的handler，那么删除该属性
                     CommonUtils.delete(elementEvents, eventType);
                 }
             });
@@ -2217,49 +2228,6 @@ class ElementEvent extends ElementAnimate {
         }
         return that.on(element, "keydown", null, handler, option);
     }
-    /**
-     * 当按键按下时触发事件
-     * keydown - > keypress - > keyup
-     * @param element 目标
-     * @param handler 事件处理函数
-     * @param option 配置
-     * @example
-     * // 监听a.xx元素的按键按下
-     * DOMUtils.keypress(document.querySelector("a.xx"),()=>{
-     *   console.log("按键按下");
-     * })
-     * DOMUtils.keypress("a.xx",()=>{
-     *   console.log("按键按下");
-     * })
-     */
-    onKeypress(element, handler, option) {
-        const that = this;
-        if (element == null) {
-            return;
-        }
-        if (typeof element === "string") {
-            element = that.selectorAll(element);
-        }
-        if (CommonUtils.isNodeList(element)) {
-            // 设置
-            const listenerList = [];
-            element.forEach(($ele) => {
-                const listener = that.onKeypress($ele, handler, option);
-                listenerList.push(listener);
-            });
-            return {
-                off() {
-                    listenerList.forEach((listener) => {
-                        if (!listener) {
-                            return;
-                        }
-                        listener.off();
-                    });
-                },
-            };
-        }
-        return that.on(element, "keypress", null, handler, option);
-    }
     /**
      * 监听某个元素键盘按键事件或window全局按键事件
      * 按下有值的键时触发，按下Ctrl\Alt\Shift\Meta是无值键。按下先触发keydown事件，再触发keypress事件。
@@ -2323,7 +2291,7 @@ class ElementEvent extends ElementAnimate {
          搜索		170
          收藏		171
       **/
-    onKeyboard(element, eventName = "keypress", handler, options) {
+    onKeyboard(element, eventName = "keydown", handler, options) {
         const that = this;
         if (typeof element === "string") {
             element = that.selectorAll(element);
@@ -2474,11 +2442,11 @@ class ElementEvent extends ElementAnimate {
          * 阻止事件的默认行为发生，并阻止事件传播
          */
         const stopEvent = (event, onlyStopPropagation) => {
+            // 停止事件的传播，阻止它继续向更上层的元素冒泡，事件将不会再传播给其他的元素
+            event?.stopPropagation();
+            // 阻止事件传播，并且还能阻止元素上的其他事件处理程序被触发
+            event?.stopImmediatePropagation();
             if (typeof onlyStopPropagation === "boolean" && onlyStopPropagation) {
-                // 停止事件的传播，阻止它继续向更上层的元素冒泡，事件将不会再传播给其他的元素
-                event?.stopPropagation();
-                // 阻止事件传播，并且还能阻止元素上的其他事件处理程序被触发
-                event?.stopImmediatePropagation();
                 return;
             }
             // 阻止事件的默认行为发生。例如，当点击一个链接时，浏览器会默认打开链接的URL，或者在输入框内输入文字
@@ -2501,7 +2469,8 @@ class ElementEvent extends ElementAnimate {
                 eventNameList = [eventNameList];
             }
             let option = void 0;
-            if (typeof args[2] === "string" || Array.isArray(args[2])) {
+            if (args.length === 2) ;
+            else if (typeof args[2] === "string" || Array.isArray(args[2])) {
                 // selector
                 selector = args[2];
                 if (typeof args[3] === "object" && args[3] != null) {