@whitesev/pops 3.3.1 → 3.3.3

package/dist/index.umd.js

@@ -297,6 +297,13 @@
         isDOM(target) {
             return target instanceof Node;
         }
+        /**
+         * 判断是否是元素列表
+         * @param $ele
+         */
+        isNodeList($ele) {
+            return Array.isArray($ele) || $ele instanceof NodeList;
+        }
         /**
          * 删除对象上的属性
          * @param target
@@ -481,9 +488,18 @@
             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
@@ -1020,7 +1036,7 @@
          */
         emit(element, eventType, details, useDispatchToEmitEvent = true) {
             if (typeof element === "string") {
-                element = PopsCore.document.querySelector(element);
+                element = this.selector(element);
             }
             if (element == null) {
                 return;
@@ -1082,18 +1098,18 @@
          * })
          * */
         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;
             }
         }
         /**
@@ -1111,18 +1127,18 @@
          * })
          * */
         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;
             }
         }
         /**
@@ -1140,18 +1156,18 @@
          * })
          * */
         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;
             }
         }
         /**
@@ -1169,15 +1185,39 @@
          * })
          */
         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();
+                },
+            };
         }
         /**
          * 当按键松开时触发事件
@@ -1195,14 +1235,14 @@
          * })
          */
         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;
         }
         /**
          * 当按键按下时触发事件
@@ -1220,14 +1260,14 @@
          * })
          */
         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;
         }
         /**
          * 当按键按下时触发事件
@@ -1245,38 +1285,69 @@
          * })
          */
         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) {
@@ -1462,7 +1533,7 @@
         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;
@@ -1513,7 +1584,7 @@
                 return PopsCore.window.document.documentElement.clientHeight;
             }
             if (typeof element === "string") {
-                element = PopsCore.document.querySelector(element);
+                element = this.selector(element);
             }
             if (element == null) {
                 return;
@@ -1561,7 +1632,7 @@
                 return PopsCore.window.innerWidth;
             }
             if (typeof element === "string") {
-                element = PopsCore.document.querySelector(element);
+                element = this.selector(element);
             }
             if (element == null) {
                 return;
@@ -1586,7 +1657,7 @@
                 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))) {
@@ -2008,12 +2079,12 @@
          * @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;
@@ -2149,7 +2220,7 @@
          * */
         before(element, content) {
             if (typeof element === "string") {
-                element = PopsCore.document.querySelector(element);
+                element = this.selector(element);
             }
             if (element == null) {
                 return;
@@ -2172,7 +2243,7 @@
          * */
         after(element, content) {
             if (typeof element === "string") {
-                element = PopsCore.document.querySelector(element);
+                element = this.selector(element);
             }
             if (element == null) {
                 return;
@@ -3537,14 +3608,14 @@
                         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);
                     }
                 });
@@ -5823,7 +5894,7 @@
              */
             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",
@@ -13301,7 +13372,7 @@
         },
     };
 
-    const version = "3.3.1";
+    const version = "3.3.3";
 
     class Pops {
         /** 配置 */