@whitesev/domutils 1.4.7 → 1.5.0

package/dist/index.esm.js

@@ -55,6 +55,30 @@ const DOMUtilsCommonUtils = {
     isShow(element) {
         return Boolean(element.getClientRects().length);
     },
+    /**
+     * 在CSP策略下设置innerHTML
+     * @param $el 元素
+     * @param text 文本
+     */
+    setSafeHTML($el, text) {
+        // 创建 TrustedHTML 策略（需 CSP 允许）
+        try {
+            $el.innerHTML = text;
+        }
+        catch (error) {
+            // @ts-ignore
+            if (globalThis.trustedTypes) {
+                // @ts-ignore
+                const policy = globalThis.trustedTypes.createPolicy("safe-innerHTML", {
+                    createHTML: (html) => html,
+                });
+                $el.innerHTML = policy.createHTML(text);
+            }
+            else {
+                throw new Error("trustedTypes is not defined");
+            }
+        }
+    },
     /**
      * 用于显示元素并获取它的高度宽度等其它属性
      * @param element
@@ -262,44 +286,45 @@ class DOMUtilsEvent {
              * @param event
              */
             function domUtilsEventCallBack(event) {
-                let eventTarget = listenerOption.isComposedPath
-                    ? event.composedPath()[0]
-                    : event.target;
                 if (selectorList.length) {
                     /* 存在子元素选择器 */
+                    // 这时候的this和target都是子元素选择器的元素
+                    let eventTarget = listenerOption.isComposedPath
+                        ? event.composedPath()[0]
+                        : event.target;
                     let totalParent = DOMUtilsCommonUtils.isWin(elementItem)
                         ? DOMUtilsContext.windowApi.document.documentElement
                         : elementItem;
-                    for (let index = 0; index < selectorList.length; index++) {
-                        const selectorItem = selectorList[index];
+                    let findValue = selectorList.find((selectorItem) => {
+                        // 判断目标元素是否匹配选择器
                         if (eventTarget.matches(selectorItem)) {
                             /* 当前目标可以被selector所匹配到 */
-                            listenerCallBack.call(eventTarget, event, eventTarget);
-                            checkOptionOnceToRemoveEventListener();
-                            break;
+                            return true;
                         }
-                        else {
-                            /* 在上层与主元素之间寻找可以被selector所匹配到的 */
-                            let $closestMatches = eventTarget.closest(selectorItem);
-                            if ($closestMatches && totalParent.contains($closestMatches)) {
-                                /* event的target值不能直接修改 */
-                                // 这里尝试使用defineProperty修改event的target值
-                                try {
-                                    OriginPrototype.Object.defineProperty(event, "target", {
-                                        get() {
-                                            return $closestMatches;
-                                        },
-                                    });
-                                }
-                                catch (error) { }
-                                listenerCallBack.call($closestMatches, event, $closestMatches);
-                                checkOptionOnceToRemoveEventListener();
-                                break;
-                            }
+                        /* 在上层与主元素之间寻找可以被selector所匹配到的 */
+                        let $closestMatches = eventTarget.closest(selectorItem);
+                        if ($closestMatches && totalParent.contains($closestMatches)) {
+                            eventTarget = $closestMatches;
+                            return true;
                         }
+                        return false;
+                    });
+                    if (findValue) {
+                        // 这里尝试使用defineProperty修改event的target值
+                        try {
+                            OriginPrototype.Object.defineProperty(event, "target", {
+                                get() {
+                                    return eventTarget;
+                                },
+                            });
+                        }
+                        catch (error) { }
+                        listenerCallBack.call(eventTarget, event, eventTarget);
+                        checkOptionOnceToRemoveEventListener();
                     }
                 }
                 else {
+                    // 这时候的this指向监听的元素
                     listenerCallBack.call(elementItem, event);
                     checkOptionOnceToRemoveEventListener();
                 }
@@ -1032,7 +1057,7 @@ class DOMUtils extends DOMUtilsEvent {
         super(option);
     }
     /** 版本号 */
-    version = "2024.12.4";
+    version = "2025.3.2";
     attr(element, attrName, attrValue) {
         let DOMUtilsContext = this;
         if (typeof element === "string") {
@@ -1089,7 +1114,7 @@ class DOMUtils extends DOMUtilsEvent {
         let DOMUtilsContext = this;
         let tempElement = DOMUtilsContext.windowApi.document.createElement(tagName);
         if (typeof property === "string") {
-            tempElement.innerHTML = property;
+            DOMUtilsContext.html(tempElement, property);
             return tempElement;
         }
         if (property == null) {
@@ -1100,6 +1125,10 @@ class DOMUtils extends DOMUtilsEvent {
         }
         Object.keys(property).forEach((key) => {
             let value = property[key];
+            if (key === "innerHTML") {
+                DOMUtilsContext.html(tempElement, value);
+                return;
+            }
             tempElement[key] = value;
         });
         Object.keys(attributes).forEach((key) => {
@@ -1268,7 +1297,7 @@ class DOMUtils extends DOMUtilsEvent {
                 html = html.innerHTML;
             }
             if ("innerHTML" in element) {
-                element.innerHTML = html;
+                DOMUtilsCommonUtils.setSafeHTML(element, html);
             }
         }
     }
@@ -1374,7 +1403,12 @@ class DOMUtils extends DOMUtilsEvent {
             return Reflect.get(element, propName);
         }
         else {
-            Reflect.set(element, propName, propValue);
+            if (element instanceof Element && propName === "innerHTML") {
+                DOMUtilsContext.html(element, propValue);
+            }
+            else {
+                Reflect.set(element, propName, propValue);
+            }
         }
     }
     /**
@@ -1772,7 +1806,7 @@ class DOMUtils extends DOMUtilsEvent {
             });
             return;
         }
-        element.innerHTML = "";
+        DOMUtilsContext.html(element, "");
     }
     /**
      * 获取元素相对于文档的偏移坐标（加上文档的滚动条）
@@ -1982,10 +2016,10 @@ class DOMUtils extends DOMUtilsEvent {
         if (typeof duration !== "number" || duration <= 0) {
             throw new TypeError("duration must be a positive number");
         }
-        if (typeof callback !== "function" && callback !== void 0) {
+        if (typeof callback !== "function" && callback !== undefined) {
             throw new TypeError("callback must be a function or null");
         }
-        if (typeof styles !== "object" || styles === void 0) {
+        if (typeof styles !== "object" || styles === undefined) {
             throw new TypeError("styles must be an object");
         }
         if (Object.keys(styles).length === 0) {
@@ -2044,7 +2078,7 @@ class DOMUtils extends DOMUtilsEvent {
         element = element;
         // 创建一个新的div元素，并将wrapperHTML作为其innerHTML
         let wrapper = DOMUtilsContext.windowApi.document.createElement("div");
-        wrapper.innerHTML = wrapperHTML;
+        DOMUtilsContext.html(wrapper, wrapperHTML);
         let wrapperFirstChild = wrapper.firstChild;
         // 将要包裹的元素插入目标元素前面
         let parentElement = element.parentElement;
@@ -2140,7 +2174,7 @@ class DOMUtils extends DOMUtilsEvent {
         }
         function parseHTMLByCreateDom() {
             let tempDIV = DOMUtilsContext.windowApi.document.createElement("div");
-            tempDIV.innerHTML = html;
+            DOMUtilsContext.html(tempDIV, html);
             if (isComplete) {
                 return tempDIV;
             }