@whitesev/domutils 1.4.7 → 1.5.0

package/dist/index.umd.js

@@ -61,6 +61,30 @@
         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
@@ -268,44 +292,45 @@
                  * @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();
                     }
@@ -1038,7 +1063,7 @@
             super(option);
         }
         /** 版本号 */
-        version = "2024.12.4";
+        version = "2025.3.2";
         attr(element, attrName, attrValue) {
             let DOMUtilsContext = this;
             if (typeof element === "string") {
@@ -1095,7 +1120,7 @@
             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) {
@@ -1106,6 +1131,10 @@
             }
             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) => {
@@ -1274,7 +1303,7 @@
                     html = html.innerHTML;
                 }
                 if ("innerHTML" in element) {
-                    element.innerHTML = html;
+                    DOMUtilsCommonUtils.setSafeHTML(element, html);
                 }
             }
         }
@@ -1380,7 +1409,12 @@
                 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);
+                }
             }
         }
         /**
@@ -1778,7 +1812,7 @@
                 });
                 return;
             }
-            element.innerHTML = "";
+            DOMUtilsContext.html(element, "");
         }
         /**
          * 获取元素相对于文档的偏移坐标（加上文档的滚动条）
@@ -1988,10 +2022,10 @@
             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) {
@@ -2050,7 +2084,7 @@
             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;
@@ -2146,7 +2180,7 @@
             }
             function parseHTMLByCreateDom() {
                 let tempDIV = DOMUtilsContext.windowApi.document.createElement("div");
-                tempDIV.innerHTML = html;
+                DOMUtilsContext.html(tempDIV, html);
                 if (isComplete) {
                     return tempDIV;
                 }