@whitesev/domutils 1.4.7 → 1.5.0

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

@@ -7,6 +7,12 @@ declare const DOMUtilsCommonUtils: {
      * @param element
      */
     isShow(element: HTMLElement): boolean;
+    /**
+     * 在CSP策略下设置innerHTML
+     * @param $el 元素
+     * @param text 文本
+     */
+    setSafeHTML($el: HTMLElement, text: string): void;
     /**
      * 用于显示元素并获取它的高度宽度等其它属性
      * @param element

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

@@ -17,6 +17,7 @@ export type DOMUtilsCreateElementAttributesMap = {
 
 export interface DOMUtils_MouseEvent {
 	click: MouseEvent | PointerEvent;
+	auxclick: PointerEvent;
 	contextmenu: MouseEvent | PointerEvent;
 	dblclick: MouseEvent | PointerEvent;
 	mousedown: MouseEvent | PointerEvent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@whitesev/domutils",
-  "version": "1.4.7",
+  "version": "1.5.0",
   "description": "使用js重新对jQuery的部分函数进行了仿写",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/DOMUtils.ts

@@ -20,7 +20,7 @@ class DOMUtils extends DOMUtilsEvent {
 		super(option);
 	}
 	/** 版本号 */
-	version = "2024.12.4";
+	version = "2025.3.2";
 	/**
 	 * 获取元素的属性值
 	 * @param element 目标元素
@@ -112,7 +112,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) {
@@ -123,6 +123,10 @@ class DOMUtils extends DOMUtilsEvent {
 		}
 		Object.keys(property).forEach((key) => {
 			let value = property[key];
+			if (key === "innerHTML") {
+				DOMUtilsContext.html(tempElement, value);
+				return;
+			}
 			(tempElement as any)[key] = value;
 		});
 		Object.keys(attributes).forEach((key) => {
@@ -424,7 +428,7 @@ class DOMUtils extends DOMUtilsEvent {
 				html = html.innerHTML;
 			}
 			if ("innerHTML" in element) {
-				element.innerHTML = html;
+				DOMUtilsCommonUtils.setSafeHTML(element, html);
 			}
 		}
 	}
@@ -627,7 +631,11 @@ class DOMUtils extends DOMUtilsEvent {
 		if (propValue == null) {
 			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);
+			}
 		}
 	}
 	/**
@@ -1034,7 +1042,7 @@ class DOMUtils extends DOMUtilsEvent {
 			});
 			return;
 		}
-		element.innerHTML = "";
+		DOMUtilsContext.html(element, "");
 	}
 	/**
 	 * 获取元素相对于文档的偏移坐标（加上文档的滚动条）
@@ -1476,7 +1484,7 @@ class DOMUtils extends DOMUtilsEvent {
 		element = element as HTMLElement;
 		// 创建一个新的div元素，并将wrapperHTML作为其innerHTML
 		let wrapper = DOMUtilsContext.windowApi.document.createElement("div");
-		wrapper.innerHTML = wrapperHTML;
+		DOMUtilsContext.html(wrapper, wrapperHTML);
 
 		let wrapperFirstChild = wrapper.firstChild as HTMLElement;
 		// 将要包裹的元素插入目标元素前面
@@ -1663,7 +1671,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;
 			} else {

package/src/DOMUtilsCommonUtils.ts

@@ -14,6 +14,28 @@ const DOMUtilsCommonUtils = {
 	isShow(element: HTMLElement) {
 		return Boolean(element.getClientRects().length);
 	},
+	/**
+	 * 在CSP策略下设置innerHTML
+	 * @param $el 元素
+	 * @param text 文本
+	 */
+	setSafeHTML($el: HTMLElement, text: string) {
+		// 创建 TrustedHTML 策略（需 CSP 允许）
+		try {
+			$el.innerHTML = text;
+		} catch (error) {
+			// @ts-ignore
+			if (globalThis.trustedTypes) {
+				// @ts-ignore
+				const policy = globalThis.trustedTypes.createPolicy("safe-innerHTML", {
+					createHTML: (html: string) => html,
+				});
+				$el.innerHTML = policy.createHTML(text);
+			} else {
+				throw new Error("trustedTypes is not defined");
+			}
+		}
+	},
 	/**
 	 * 用于显示元素并获取它的高度宽度等其它属性
 	 * @param element

package/src/DOMUtilsEvent.ts

@@ -265,47 +265,44 @@ export class DOMUtilsEvent {
 			 * @param event
 			 */
 			function domUtilsEventCallBack(event: Event) {
-				let eventTarget = listenerOption.isComposedPath
-					? (event.composedPath()[0] as HTMLElement)
-					: (event.target as HTMLElement);
 				if (selectorList.length) {
 					/* 存在子元素选择器 */
+					// 这时候的this和target都是子元素选择器的元素
+					let eventTarget = listenerOption.isComposedPath
+						? (event.composedPath()[0] as HTMLElement)
+						: (event.target as HTMLElement);
 					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 as any, eventTarget);
-							checkOptionOnceToRemoveEventListener();
-							break;
-						} else {
-							/* 在上层与主元素之间寻找可以被selector所匹配到的 */
-							let $closestMatches = eventTarget.closest(
-								selectorItem
-							) as HTMLElement | null;
-							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 as any,
-									$closestMatches
-								);
-								checkOptionOnceToRemoveEventListener();
-								break;
-							}
+							return true;
 						}
+						/* 在上层与主元素之间寻找可以被selector所匹配到的 */
+						let $closestMatches =
+							eventTarget.closest<HTMLElement>(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 as any, eventTarget);
+						checkOptionOnceToRemoveEventListener();
 					}
 				} else {
+					// 这时候的this指向监听的元素
 					listenerCallBack.call(elementItem, event as any);
 					checkOptionOnceToRemoveEventListener();
 				}

package/src/types/DOMUtilsEvent.d.ts

@@ -17,6 +17,7 @@ export type DOMUtilsCreateElementAttributesMap = {
 
 export interface DOMUtils_MouseEvent {
 	click: MouseEvent | PointerEvent;
+	auxclick: PointerEvent;
 	contextmenu: MouseEvent | PointerEvent;
 	dblclick: MouseEvent | PointerEvent;
 	mousedown: MouseEvent | PointerEvent;