@whitesev/pops 3.3.1 → 3.3.3

package/dist/types/src/Pops.d.ts

@@ -85,12 +85,13 @@ declare class Pops {
         };
         /** 禁止滚动 */
         forbiddenScroll: {
-            event(event: Event): boolean;
+            event(event: Event): false;
         };
         /** pops使用的工具类 */
         Utils: {
             isWin(target: any): boolean;
             isDOM(target: any): boolean;
+            isNodeList($ele: any): $ele is any[] | NodeList;
             delete(target: any, propName: any): void;
             assign<T1, T2 extends object, T3 extends boolean>(target: T1, source: T2, isAdd?: T3 | undefined): T3 extends true ? T1 & T2 : T1;
             getRandomGUID(): string;
@@ -100,6 +101,7 @@ declare class Pops {
             formatTime(text?: string | number | Date, formatType?: "yyyy-MM-dd HH:mm:ss" | "yyyy/MM/dd HH:mm:ss" | "yyyy_MM_dd_HH_mm_ss" | "yyyy\u5E74MM\u6708dd\u65E5 HH\u65F6mm\u5206ss\u79D2" | "yyyy\u5E74MM\u6708dd\u65E5 hh:mm:ss" | "yyyy\u5E74MM\u6708dd\u65E5 HH:mm:ss" | "yyyy-MM-dd" | "yyyyMMdd" | "HH:mm:ss"): string;
             formatByteToSize<T extends boolean>(byteSize: number | string, addType?: T | undefined): T extends true ? string : number;
             AnyTouch: () => typeof import("any-touch").default;
+            AnyTouchDoubleTapPlugin: () => typeof import("@any-touch/doubletap").default;
             isPhone(userAgent?: string): boolean;
             setTimeout(callback: (...args: any[]) => any, timeout?: number): number;
             clearTimeout(timeId: number | undefined): void;
@@ -171,15 +173,27 @@ declare class Pops {
             onReady<T extends (...args: any[]) => any>(callback: T): void;
             emit(element: HTMLElement | string | NodeList | any[] | Window | Document, eventType: string | string[], details?: object, useDispatchToEmitEvent?: boolean): void;
             emit(element: HTMLElement | string | NodeList | any[] | Window | Document, eventType: import("./types/PopsDOMUtilsEventType").PopsDOMUtils_EventType | import("./types/PopsDOMUtilsEventType").PopsDOMUtils_EventType[], details?: object, useDispatchToEmitEvent?: boolean): void;
-            click(element: HTMLElement | string | Window, handler?: (event: import("./types/PopsDOMUtilsEventType").PopsDOMUtils_Event["click"]) => void, details?: any, useDispatchToEmitEvent?: boolean): void;
-            blur(element: HTMLElement | string | Window, handler?: (event: import("./types/PopsDOMUtilsEventType").PopsDOMUtils_Event["blur"]) => void, details?: object, useDispatchToEmitEvent?: boolean): void;
-            focus(element: HTMLElement | string | Window, handler?: (event: import("./types/PopsDOMUtilsEventType").PopsDOMUtils_Event["focus"]) => void, details?: object, useDispatchToEmitEvent?: boolean): void;
-            onHover(element: HTMLElement | string, handler: (event: import("./types/PopsDOMUtilsEventType").PopsDOMUtils_Event["hover"]) => void, option?: boolean | AddEventListenerOptions): void;
-            onKeyup(target: HTMLElement | string | Window | typeof globalThis, handler: (event: import("./types/PopsDOMUtilsEventType").PopsDOMUtils_Event["keyup"]) => void, option?: boolean | AddEventListenerOptions): void;
-            onKeydown(target: HTMLElement | Window | typeof globalThis | string, handler: (event: import("./types/PopsDOMUtilsEventType").PopsDOMUtils_Event["keydown"]) => void, option?: boolean | AddEventListenerOptions): void;
-            onKeypress(target: HTMLElement | Window | typeof globalThis | string, handler: (event: import("./types/PopsDOMUtilsEventType").PopsDOMUtils_Event["keypress"]) => void, option?: boolean | AddEventListenerOptions): void;
-            preventEvent(event: Event): boolean;
-            preventEvent(element: HTMLElement, eventNameList?: string | string[], capture?: boolean): boolean;
+            click(element: HTMLElement | string | Window, handler?: (event: import("./types/PopsDOMUtilsEventType").PopsDOMUtils_Event["click"]) => void, details?: any, useDispatchToEmitEvent?: boolean): import("./types/PopsDOMUtilsEventType").PopsDOMUtilsAddEventListenerResult | undefined;
+            blur(element: HTMLElement | string | Window, handler?: (event: import("./types/PopsDOMUtilsEventType").PopsDOMUtils_Event["blur"]) => void, details?: object, useDispatchToEmitEvent?: boolean): import("./types/PopsDOMUtilsEventType").PopsDOMUtilsAddEventListenerResult | undefined;
+            focus(element: HTMLElement | string | Window, handler?: (event: import("./types/PopsDOMUtilsEventType").PopsDOMUtils_Event["focus"]) => void, details?: object, useDispatchToEmitEvent?: boolean): import("./types/PopsDOMUtilsEventType").PopsDOMUtilsAddEventListenerResult | undefined;
+            onHover(element: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsTargetElementType | Element | DocumentFragment | Node, handler: (this: HTMLElement, event: import("./types/PopsDOMUtilsEventType").PopsDOMUtils_Event["hover"]) => void, option?: boolean | import("./types/PopsDOMUtilsEventType").PopsDOMUtilsEventListenerOption): import("./types/PopsDOMUtilsEventType").PopsDOMUtilsAddEventListenerResult | undefined;
+            onKeyup(target: HTMLElement | string | Window | typeof globalThis, handler: (event: import("./types/PopsDOMUtilsEventType").PopsDOMUtils_Event["keyup"]) => void, option?: boolean | AddEventListenerOptions): import("./types/PopsDOMUtilsEventType").PopsDOMUtilsAddEventListenerResult | undefined;
+            onKeydown(target: HTMLElement | Window | typeof globalThis | string, handler: (event: import("./types/PopsDOMUtilsEventType").PopsDOMUtils_Event["keydown"]) => void, option?: boolean | AddEventListenerOptions): import("./types/PopsDOMUtilsEventType").PopsDOMUtilsAddEventListenerResult | undefined;
+            onKeypress(target: HTMLElement | Window | typeof globalThis | string, handler: (event: import("./types/PopsDOMUtilsEventType").PopsDOMUtils_Event["keypress"]) => void, option?: boolean | AddEventListenerOptions): import("./types/PopsDOMUtilsEventType").PopsDOMUtilsAddEventListenerResult | undefined;
+            preventEvent(event: Event): false;
+            preventEvent<T extends boolean>(event: Event, onlyStopPropagation: T): T extends true ? void : false;
+            preventEvent($el: HTMLElement, eventNameList: string | string[], option?: {
+                capture?: boolean;
+                onlyStopPropagation?: boolean;
+            }): {
+                off(): void;
+            };
+            preventEvent($el: HTMLElement, eventNameList: string | string[], selector: string | string[] | null | undefined, option?: {
+                capture?: boolean;
+                onlyStopPropagation?: boolean;
+            }): {
+                off(): void;
+            };
             selector<K extends keyof HTMLElementTagNameMap>(selector: K): HTMLElementTagNameMap[K] | undefined;
             selector<E extends Element = Element>(selector: string): E | undefined;
             selectorAll<K extends keyof HTMLElementTagNameMap>(selector: K): HTMLElementTagNameMap[K][];

package/dist/types/src/utils/PopsDOMUtils.d.ts

@@ -211,7 +211,7 @@ declare class PopsDOMUtilsEvent {
      *  console.log("触发click事件成功")
      * })
      * */
-    click(element: HTMLElement | string | Window, handler?: (event: PopsDOMUtils_Event["click"]) => void, details?: any, useDispatchToEmitEvent?: boolean): void;
+    click(element: HTMLElement | string | Window, handler?: (event: PopsDOMUtils_Event["click"]) => void, details?: any, useDispatchToEmitEvent?: boolean): PopsDOMUtilsAddEventListenerResult | undefined;
     /**
      * 绑定或触发元素的blur事件
      * @param element 目标元素
@@ -226,7 +226,7 @@ declare class PopsDOMUtilsEvent {
      *  console.log("触发blur事件成功")
      * })
      * */
-    blur(element: HTMLElement | string | Window, handler?: (event: PopsDOMUtils_Event["blur"]) => void, details?: object, useDispatchToEmitEvent?: boolean): void;
+    blur(element: HTMLElement | string | Window, handler?: (event: PopsDOMUtils_Event["blur"]) => void, details?: object, useDispatchToEmitEvent?: boolean): PopsDOMUtilsAddEventListenerResult | undefined;
     /**
      * 绑定或触发元素的focus事件
      * @param element 目标元素
@@ -241,7 +241,7 @@ declare class PopsDOMUtilsEvent {
      *  console.log("触发focus事件成功")
      * })
      * */
-    focus(element: HTMLElement | string | Window, handler?: (event: PopsDOMUtils_Event["focus"]) => void, details?: object, useDispatchToEmitEvent?: boolean): void;
+    focus(element: HTMLElement | string | Window, handler?: (event: PopsDOMUtils_Event["focus"]) => void, details?: object, useDispatchToEmitEvent?: boolean): PopsDOMUtilsAddEventListenerResult | undefined;
     /**
      * 当鼠标移入或移出元素时触发事件
      * @param element 当前元素
@@ -256,7 +256,7 @@ declare class PopsDOMUtilsEvent {
      *   console.log("移入/移除");
      * })
      */
-    onHover(element: HTMLElement | string, handler: (event: PopsDOMUtils_Event["hover"]) => void, option?: boolean | AddEventListenerOptions): void;
+    onHover(element: PopsDOMUtilsTargetElementType | Element | DocumentFragment | Node, handler: (this: HTMLElement, event: PopsDOMUtils_Event["hover"]) => void, option?: boolean | PopsDOMUtilsEventListenerOption): PopsDOMUtilsAddEventListenerResult | undefined;
     /**
      * 当按键松开时触发事件
      * keydown - > keypress - > keyup
@@ -272,7 +272,7 @@ declare class PopsDOMUtilsEvent {
      *   console.log("按键松开");
      * })
      */
-    onKeyup(target: HTMLElement | string | Window | typeof globalThis, handler: (event: PopsDOMUtils_Event["keyup"]) => void, option?: boolean | AddEventListenerOptions): void;
+    onKeyup(target: HTMLElement | string | Window | typeof globalThis, handler: (event: PopsDOMUtils_Event["keyup"]) => void, option?: boolean | AddEventListenerOptions): PopsDOMUtilsAddEventListenerResult | undefined;
     /**
      * 当按键按下时触发事件
      * keydown - > keypress - > keyup
@@ -288,7 +288,7 @@ declare class PopsDOMUtilsEvent {
      *   console.log("按键按下");
      * })
      */
-    onKeydown(target: HTMLElement | Window | typeof globalThis | string, handler: (event: PopsDOMUtils_Event["keydown"]) => void, option?: boolean | AddEventListenerOptions): void;
+    onKeydown(target: HTMLElement | Window | typeof globalThis | string, handler: (event: PopsDOMUtils_Event["keydown"]) => void, option?: boolean | AddEventListenerOptions): PopsDOMUtilsAddEventListenerResult | undefined;
     /**
      * 当按键按下时触发事件
      * keydown - > keypress - > keyup
@@ -304,29 +304,79 @@ declare class PopsDOMUtilsEvent {
      *   console.log("按键按下");
      * })
      */
-    onKeypress(target: HTMLElement | Window | typeof globalThis | string, handler: (event: PopsDOMUtils_Event["keypress"]) => void, option?: boolean | AddEventListenerOptions): void;
+    onKeypress(target: HTMLElement | Window | typeof globalThis | string, handler: (event: PopsDOMUtils_Event["keypress"]) => void, option?: boolean | AddEventListenerOptions): PopsDOMUtilsAddEventListenerResult | undefined;
     /**
      * 阻止事件传递
-     * @param element 要进行处理的元素
-     * @param eventNameList （可选）要阻止的事件名|列表
-     * @param capture （可选）是否捕获，默认false
-     * @example
-     * Utils.preventEvent(document.querySelector("a"),"click")
+     *
+     * + `.preventDefault()`: 阻止事件的默认行为发生。例如，当点击一个链接时，浏览器会默认打开链接的URL，或者在输入框内输入文字
+     * + `.stopPropagation()`: 停止事件的传播，阻止它继续向更上层的元素冒泡，事件将不会再传播给其他的元素
+     * + `.stopImmediatePropagation()`: 阻止事件传播，并且还能阻止元素上的其他事件处理程序被触发
+     * @param event 要阻止传递的事件
      * @example
-     * Utils.preventEvent(event);
+     * DOMUtils.preventEvent(event);
      */
-    preventEvent(event: Event): boolean;
+    preventEvent(event: Event): false;
     /**
      * 阻止事件传递
-     * @param element 要进行处理的元素
-     * @param eventNameList （可选）要阻止的事件名|列表
-     * @param capture （可选）是否捕获，默认false
+     * @param event 要阻止传递的事件
+     * @param onlyStopPropagation （可选）是否仅阻止事件的传播，默认false，不调用`.preventDefault()`
+     * @example
+     * DOMUtils.preventEvent(event, true);
+     */
+    preventEvent<T extends boolean>(event: Event, onlyStopPropagation: T): T extends true ? void : false;
+    /**
+     * 通过监听事件来主动阻止事件的传递
+     * @param $el 要进行处理的元素
+     * @param eventNameList 要阻止的事件名|列表
+     * @param option （可选）配置项
+     * @example
+     * DOMUtils.preventEvent(document.querySelector("a"), "click")
+     * @example
+     * DOMUtils.preventEvent(document.querySelector("a"), "click", undefined, {
+     *   capture: true,
+     * })
+     * @example
+     * DOMUtils.preventEvent(document, "click", "a.xxx", {
+     *   capture: true,
+     *   onlyStopPropagation: true,
+     * })
+     */
+    preventEvent($el: HTMLElement, eventNameList: string | string[], option?: {
+        /** （可选）是否捕获，默认false */
+        capture?: boolean;
+        /** （可选）是否仅阻止事件的传播，默认false，不调用`.preventDefault()` */
+        onlyStopPropagation?: boolean;
+    }): {
+        /** 移除监听事件 */
+        off(): void;
+    };
+    /**
+     * 通过监听事件来主动阻止事件的传递
+     * @param $el 要进行处理的元素
+     * @param eventNameList 要阻止的事件名|列表
+     * @param selector 子元素选择器
+     * @param option （可选）配置项
      * @example
-     * Utils.preventEvent(document.querySelector("a"),"click")
+     * DOMUtils.preventEvent(document.querySelector("a"), "click")
      * @example
-     * Utils.preventEvent(event);
+     * DOMUtils.preventEvent(document.querySelector("a"), "click", undefined, {
+     *   capture: true,
+     * })
+     * @example
+     * DOMUtils.preventEvent(document, "click", "a.xxx", {
+     *   capture: true,
+     *   onlyStopPropagation: true,
+     * })
      */
-    preventEvent(element: HTMLElement, eventNameList?: string | string[], capture?: boolean): boolean;
+    preventEvent($el: HTMLElement, eventNameList: string | string[], selector: string | string[] | null | undefined, option?: {
+        /** （可选）是否捕获，默认false */
+        capture?: boolean;
+        /** （可选）是否仅阻止事件的传播，默认false，不调用`.preventDefault()` */
+        onlyStopPropagation?: boolean;
+    }): {
+        /** 移除监听事件 */
+        off(): void;
+    };
     /**
      * 选择器，可使用以下的额外语法
      *
@@ -662,7 +712,7 @@ declare 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: Element | Node | ShadowRoot | HTMLElement | string, content: HTMLElement | string | (HTMLElement | string | Element)[] | NodeList): void;

package/dist/types/src/utils/PopsUtils.d.ts

@@ -1,4 +1,5 @@
 import AnyTouch from "any-touch";
+import doubletap from "@any-touch/doubletap";
 declare class PopsUtils {
     /**
      * 判断是否是window，例如window、self、globalThis
@@ -16,6 +17,11 @@ declare class PopsUtils {
      * > true
      */
     isDOM(target: any): boolean;
+    /**
+     * 判断是否是元素列表
+     * @param $ele
+     */
+    isNodeList($ele: any): $ele is any[] | NodeList;
     /**
      * 删除对象上的属性
      * @param target
@@ -112,7 +118,14 @@ declare class PopsUtils {
      * > 793.27
      **/
     formatByteToSize<T extends boolean>(byteSize: number | string, addType?: T): T extends true ? string : number;
+    /**
+     * https://github.com/any86/any-touch/blob/master/README.CN.md
+     */
     AnyTouch: () => typeof AnyTouch;
+    /**
+     * `any-touch`的`doubletap`事件插件
+     */
+    AnyTouchDoubleTapPlugin: () => typeof doubletap;
     /**
      * 通过navigator.userAgent判断是否是手机访问
      * @param userAgent

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@whitesev/pops",
-  "version": "3.3.1",
+  "version": "3.3.3",
   "description": "弹窗库，包含了alert、confirm、prompt、drawer、folder、loading、iframe、panel、tooltip、searchSuggestion、rightClickMenu组件",
   "keywords": [
     "ScriptCat",
@@ -40,6 +40,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
+    "@any-touch/doubletap": "^2.2.0",
     "any-touch": "^2.2.0"
   },
   "devDependencies": {

package/src/components/iframe/index.ts

@@ -1,15 +1,14 @@
-import { PopsCore } from "../../PopsCore";
 import { GlobalConfig } from "../../config/GlobalConfig";
 import { PopsElementHandler } from "../../handler/PopsElementHandler";
 import { PopsHandler } from "../../handler/PopsHandler";
 import { PopsCSS } from "../../PopsCSS";
 import { PopsInstData } from "../../PopsInst";
+import type { PopsType } from "../../types/main";
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
 import { PopsInstanceUtils } from "../../utils/PopsInstanceUtils";
 import { popsUtils } from "../../utils/PopsUtils";
 import { PopsIframeDefaultConfig } from "./defaultConfig";
 import type { PopsIframeClickEventConfig, PopsIframeConfig } from "./types";
-import type { PopsType } from "../../types/main";
 
 export const PopsIframe = {
   init(__config__: PopsIframeConfig) {
@@ -102,7 +101,7 @@ export const PopsIframe = {
       $headerBtnMax: headerMaxBtnElement,
       $headerBtnMise: headerMiseBtnElement,
     } = PopsHandler.handleQueryElement($anim, popsType);
-    let $iframeContainer = PopsCore.document.querySelector<HTMLDivElement>(".pops-iframe-container");
+    let $iframeContainer = popsDOMUtils.selector<HTMLDivElement>(".pops-iframe-container");
     if (!$iframeContainer) {
       $iframeContainer = popsDOMUtils.createElement("div", {
         className: "pops-iframe-container",

package/src/handler/PopsHandler.ts

@@ -171,14 +171,14 @@ export const PopsHandler = {
         );
       }
       // 判断按下的元素是否是pops-anim
-      popsDOMUtils.on(config.animElement, ["touchstart", "mousedown"], (event) => {
+      popsDOMUtils.on(config.animElement, "pointerup", (event) => {
         const $click = event.composedPath()[0] as HTMLElement;
         isMaskClick = isAnimElement($click);
       });
       // 如果有动画层，在动画层上监听点击事件
       popsDOMUtils.on<MouseEvent | PointerEvent>(config.animElement, "click", (event) => {
         const $click = event.composedPath()[0] as HTMLElement;
-        if (isAnimElement($click) && isMaskClick) {
+        if (isMaskClick && isAnimElement($click)) {
           return clickEvent(event);
         }
       });