@whitesev/pops 3.3.1 → 3.3.3

package/dist/index.esm.js

@@ -291,6 +291,13 @@ class PopsUtils {
     isDOM(target) {
         return target instanceof Node;
     }
+    /**
+     * 判断是否是元素列表
+     * @param $ele
+     */
+    isNodeList($ele) {
+        return Array.isArray($ele) || $ele instanceof NodeList;
+    }
     /**
      * 删除对象上的属性
      * @param target
@@ -475,9 +482,18 @@ class PopsUtils {
         result = addType ? result + resultType.toString() : parseFloat(result.toString());
         return result;
     }
+    /**
+     * https://github.com/any86/any-touch/blob/master/README.CN.md
+     */
     AnyTouch = () => {
         return i;
     };
+    /**
+     * `any-touch`的`doubletap`事件插件
+     */
+    AnyTouchDoubleTapPlugin = () => {
+        return e;
+    };
     /**
      * 通过navigator.userAgent判断是否是手机访问
      * @param userAgent
@@ -1014,7 +1030,7 @@ class PopsDOMUtilsEvent {
      */
     emit(element, eventType, details, useDispatchToEmitEvent = true) {
         if (typeof element === "string") {
-            element = PopsCore.document.querySelector(element);
+            element = this.selector(element);
         }
         if (element == null) {
             return;
@@ -1076,18 +1092,18 @@ class PopsDOMUtilsEvent {
      * })
      * */
     click(element, handler, details, useDispatchToEmitEvent) {
-        const DOMUtilsContext = this;
         if (typeof element === "string") {
-            element = PopsCore.document.querySelector(element);
+            element = this.selector(element);
         }
         if (element == null) {
             return;
         }
         if (handler == null) {
-            DOMUtilsContext.emit(element, "click", details, useDispatchToEmitEvent);
+            this.emit(element, "click", details, useDispatchToEmitEvent);
         }
         else {
-            DOMUtilsContext.on(element, "click", null, handler);
+            const listener = this.on(element, "click", handler);
+            return listener;
         }
     }
     /**
@@ -1105,18 +1121,18 @@ class PopsDOMUtilsEvent {
      * })
      * */
     blur(element, handler, details, useDispatchToEmitEvent) {
-        const DOMUtilsContext = this;
         if (typeof element === "string") {
-            element = PopsCore.document.querySelector(element);
+            element = this.selector(element);
         }
         if (element == null) {
             return;
         }
         if (handler === null) {
-            DOMUtilsContext.emit(element, "blur", details, useDispatchToEmitEvent);
+            this.emit(element, "blur", details, useDispatchToEmitEvent);
         }
         else {
-            DOMUtilsContext.on(element, "blur", null, handler);
+            const listener = this.on(element, "blur", handler);
+            return listener;
         }
     }
     /**
@@ -1134,18 +1150,18 @@ class PopsDOMUtilsEvent {
      * })
      * */
     focus(element, handler, details, useDispatchToEmitEvent) {
-        const DOMUtilsContext = this;
         if (typeof element === "string") {
-            element = PopsCore.document.querySelector(element);
+            element = this.selector(element);
         }
         if (element == null) {
             return;
         }
         if (handler == null) {
-            DOMUtilsContext.emit(element, "focus", details, useDispatchToEmitEvent);
+            this.emit(element, "focus", details, useDispatchToEmitEvent);
         }
         else {
-            DOMUtilsContext.on(element, "focus", null, handler);
+            const listener = this.on(element, "focus", handler);
+            return listener;
         }
     }
     /**
@@ -1163,15 +1179,39 @@ class PopsDOMUtilsEvent {
      * })
      */
     onHover(element, handler, option) {
-        const DOMUtilsContext = this;
+        const that = this;
         if (typeof element === "string") {
-            element = PopsCore.document.querySelector(element);
+            element = that.selectorAll(element);
         }
         if (element == null) {
             return;
         }
-        DOMUtilsContext.on(element, "mouseenter", null, handler, option);
-        DOMUtilsContext.on(element, "mouseleave", null, handler, option);
+        if (popsUtils.isNodeList(element)) {
+            // 设置
+            const listenerList = [];
+            element.forEach(($ele) => {
+                const listener = that.onHover($ele, handler, option);
+                listenerList.push(listener);
+            });
+            return {
+                off() {
+                    listenerList.forEach((listener) => {
+                        if (!listener) {
+                            return;
+                        }
+                        listener.off();
+                    });
+                },
+            };
+        }
+        const mouseenter_listener = that.on(element, "mouseenter", null, handler, option);
+        const mouseleave_listener = that.on(element, "mouseleave", null, handler, option);
+        return {
+            off() {
+                mouseenter_listener.off();
+                mouseleave_listener.off();
+            },
+        };
     }
     /**
      * 当按键松开时触发事件
@@ -1189,14 +1229,14 @@ class PopsDOMUtilsEvent {
      * })
      */
     onKeyup(target, handler, option) {
-        const DOMUtilsContext = this;
         if (target == null) {
             return;
         }
         if (typeof target === "string") {
-            target = PopsCore.document.querySelector(target);
+            target = this.selector(target);
         }
-        DOMUtilsContext.on(target, "keyup", null, handler, option);
+        const listener = this.on(target, "keyup", handler, option);
+        return listener;
     }
     /**
      * 当按键按下时触发事件
@@ -1214,14 +1254,14 @@ class PopsDOMUtilsEvent {
      * })
      */
     onKeydown(target, handler, option) {
-        const DOMUtilsContext = this;
         if (target == null) {
             return;
         }
         if (typeof target === "string") {
-            target = PopsCore.document.querySelector(target);
+            target = this.selector(target);
         }
-        DOMUtilsContext.on(target, "keydown", null, handler, option);
+        const listener = this.on(target, "keydown", handler, option);
+        return listener;
     }
     /**
      * 当按键按下时触发事件
@@ -1239,38 +1279,69 @@ class PopsDOMUtilsEvent {
      * })
      */
     onKeypress(target, handler, option) {
-        const DOMUtilsContext = this;
         if (target == null) {
             return;
         }
         if (typeof target === "string") {
-            target = PopsCore.document.querySelector(target);
+            target = this.selector(target);
         }
-        DOMUtilsContext.on(target, "keypress", null, handler, option);
+        const listener = this.on(target, "keypress", handler, option);
+        return listener;
     }
-    preventEvent(element, eventNameList = [], capture) {
-        function stopEvent(event) {
-            // 阻止事件的默认行为发生。例如，当点击一个链接时，浏览器会默认打开链接的URL
+    preventEvent(...args) {
+        /**
+         * 阻止事件的默认行为发生，并阻止事件传播
+         */
+        const stopEvent = (event, onlyStopPropagation) => {
+            if (typeof onlyStopPropagation === "boolean" && onlyStopPropagation) {
+                // 停止事件的传播，阻止它继续向更上层的元素冒泡，事件将不会再传播给其他的元素
+                event?.stopPropagation();
+                // 阻止事件传播，并且还能阻止元素上的其他事件处理程序被触发
+                event?.stopImmediatePropagation();
+                return;
+            }
+            // 阻止事件的默认行为发生。例如，当点击一个链接时，浏览器会默认打开链接的URL，或者在输入框内输入文字
             event?.preventDefault();
-            // 停止事件的传播，阻止它继续向更上层的元素冒泡，事件将不会再传播给其他的元素
-            event?.stopPropagation();
-            // 阻止事件传播，并且还能阻止元素上的其他事件处理程序被触发
-            event?.stopImmediatePropagation();
             return false;
-        }
-        if (arguments.length === 1) {
+        };
+        if (args[0] instanceof Event) {
             // 直接阻止事件
-            // eslint-disable-next-line prefer-rest-params
-            return stopEvent(arguments[0]);
+            const onlyStopPropagation = args[1];
+            return stopEvent(args[0], onlyStopPropagation);
         }
         else {
+            const $el = args[0];
+            let eventNameList = args[1];
+            let selector = void 0;
+            let capture = false;
+            let onlyStopPropagation = false;
             // 添加对应的事件来阻止触发
             if (typeof eventNameList === "string") {
                 eventNameList = [eventNameList];
             }
-            eventNameList.forEach((eventName) => {
-                this.on(element, eventName, stopEvent, { capture: Boolean(capture) });
-            });
+            let option = void 0;
+            if (typeof args[2] === "string" || Array.isArray(args[2])) {
+                // selector
+                selector = args[2];
+                if (typeof args[3] === "object" && args[3] != null) {
+                    option = args[3];
+                }
+            }
+            else if (typeof args[2] === "object" && args[2] != null && !Array.isArray(args[2])) {
+                // option
+                option = args[2];
+            }
+            else {
+                throw new TypeError("Invalid argument");
+            }
+            if (option) {
+                capture = Boolean(option.capture);
+                onlyStopPropagation = Boolean(option.onlyStopPropagation);
+            }
+            const listener = this.on($el, eventNameList, selector, (evt) => {
+                return stopEvent(evt, onlyStopPropagation);
+            }, { capture: capture });
+            return listener;
         }
     }
     selector(selector) {
@@ -1456,7 +1527,7 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
     width(element, isShow = false, parent) {
         const DOMUtilsContext = this;
         if (typeof element === "string") {
-            element = PopsCore.document.querySelector(element);
+            element = this.selector(element);
         }
         if (element == null) {
             return;
@@ -1507,7 +1578,7 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
             return PopsCore.window.document.documentElement.clientHeight;
         }
         if (typeof element === "string") {
-            element = PopsCore.document.querySelector(element);
+            element = this.selector(element);
         }
         if (element == null) {
             return;
@@ -1555,7 +1626,7 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
             return PopsCore.window.innerWidth;
         }
         if (typeof element === "string") {
-            element = PopsCore.document.querySelector(element);
+            element = this.selector(element);
         }
         if (element == null) {
             return;
@@ -1580,7 +1651,7 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
             return PopsCore.window.innerHeight;
         }
         if (typeof element === "string") {
-            element = PopsCore.document.querySelector(element);
+            element = this.selector(element);
         }
         element = element;
         if (isShow || (!isShow && popsDOMUtils.isShow(element))) {
@@ -2002,12 +2073,12 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
      * @param content 子元素或HTML字符串
      * @example
      * // 元素a.xx的内部末尾添加一个元素
-     * DOMUtils.append(document.querySelector("a.xx"),document.querySelector("b.xx"))
+     * DOMUtils.append(document.querySelector("a.xx"), document.querySelector("b.xx"))
      * DOMUtils.append("a.xx","'<b class="xx"></b>")
      * */
     append(element, content) {
         if (typeof element === "string") {
-            element = PopsCore.document.querySelector(element);
+            element = this.selector(element);
         }
         if (element == null) {
             return;
@@ -2143,7 +2214,7 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
      * */
     before(element, content) {
         if (typeof element === "string") {
-            element = PopsCore.document.querySelector(element);
+            element = this.selector(element);
         }
         if (element == null) {
             return;
@@ -2166,7 +2237,7 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
      * */
     after(element, content) {
         if (typeof element === "string") {
-            element = PopsCore.document.querySelector(element);
+            element = this.selector(element);
         }
         if (element == null) {
             return;
@@ -3531,14 +3602,14 @@ const PopsHandler = {
                     element.hasAttribute("anim"));
             }
             // 判断按下的元素是否是pops-anim
-            popsDOMUtils.on(config.animElement, ["touchstart", "mousedown"], (event) => {
+            popsDOMUtils.on(config.animElement, "pointerup", (event) => {
                 const $click = event.composedPath()[0];
                 isMaskClick = isAnimElement($click);
             });
             // 如果有动画层，在动画层上监听点击事件
             popsDOMUtils.on(config.animElement, "click", (event) => {
                 const $click = event.composedPath()[0];
-                if (isAnimElement($click) && isMaskClick) {
+                if (isMaskClick && isAnimElement($click)) {
                     return clickEvent(event);
                 }
             });
@@ -5817,7 +5888,7 @@ const PopsIframe = {
          */
         const $anim = PopsElementHandler.parseElement(animHTML);
         const { $pops: $pops, $headerBtnClose: headerCloseBtnElement, $headerControls: headerControlsElement, $title: $title, $iframe: $iframe, $loading: loadingElement, $contentLoading: $contentLoading, $headerBtnMin: headerMinBtnElement, $headerBtnMax: headerMaxBtnElement, $headerBtnMise: headerMiseBtnElement, } = PopsHandler.handleQueryElement($anim, popsType);
-        let $iframeContainer = PopsCore.document.querySelector(".pops-iframe-container");
+        let $iframeContainer = popsDOMUtils.selector(".pops-iframe-container");
         if (!$iframeContainer) {
             $iframeContainer = popsDOMUtils.createElement("div", {
                 className: "pops-iframe-container",
@@ -13295,7 +13366,7 @@ const PopsSearchSuggestion = {
     },
 };
 
-const version = "3.3.1";
+const version = "3.3.3";
 
 class Pops {
     /** 配置 */