@whitesev/domutils 1.4.3 → 1.4.4

package/dist/index.esm.js

@@ -176,8 +176,9 @@ class DOMUtilsEvent {
          * @param option
          */
         function getOption(args, startIndex, option) {
-            if (typeof args[startIndex] === "boolean") {
-                option.capture = args[startIndex];
+            let currentParam = args[startIndex];
+            if (typeof currentParam === "boolean") {
+                option.capture = currentParam;
                 if (typeof args[startIndex + 1] === "boolean") {
                     option.once = args[startIndex + 1];
                 }
@@ -185,13 +186,15 @@ class DOMUtilsEvent {
                     option.passive = args[startIndex + 2];
                 }
             }
-            else if (typeof args[startIndex] === "object" &&
-                ("capture" in args[startIndex] ||
-                    "once" in args[startIndex] ||
-                    "passive" in args[startIndex])) {
-                option.capture = args[startIndex].capture;
-                option.once = args[startIndex].once;
-                option.passive = args[startIndex].passive;
+            else if (typeof currentParam === "object" &&
+                ("capture" in currentParam ||
+                    "once" in currentParam ||
+                    "passive" in currentParam ||
+                    "isComposedPath" in currentParam)) {
+                option.capture = currentParam.capture;
+                option.once = currentParam.once;
+                option.passive = currentParam.passive;
+                option.isComposedPath = currentParam.isComposedPath;
             }
             return option;
         }
@@ -228,27 +231,28 @@ class DOMUtilsEvent {
             selectorList.push(selector);
         }
         // 事件回调
-        let _callback_ = callback;
+        let listenerCallBack = callback;
         // 事件配置
-        let _option_ = {
+        let listenerOption = {
             capture: false,
             once: false,
             passive: false,
+            isComposedPath: false,
         };
         if (typeof selector === "function") {
             /* 这是为没有selector的情况 */
-            _callback_ = selector;
-            _option_ = getOption(args, 3, _option_);
+            listenerCallBack = selector;
+            listenerOption = getOption(args, 3, listenerOption);
         }
         else {
             /* 这是存在selector的情况 */
-            _option_ = getOption(args, 4, _option_);
+            listenerOption = getOption(args, 4, listenerOption);
         }
         /**
          * 如果是once，那么删除该监听和元素上的事件和监听
          */
         function checkOptionOnceToRemoveEventListener() {
-            if (_option_.once) {
+            if (listenerOption.once) {
                 DOMUtilsContext.off(element, eventType, selector, callback, option);
             }
         }
@@ -258,53 +262,56 @@ class DOMUtilsEvent {
              * @param event
              */
             function domUtilsEventCallBack(event) {
-                let target = event.target;
+                let eventTarget = listenerOption.isComposedPath
+                    ? event.composedPath()[0]
+                    : event.target;
                 if (selectorList.length) {
-                    /* 存在自定义子元素选择器 */
+                    /* 存在子元素选择器 */
                     let totalParent = DOMUtilsCommonUtils.isWin(elementItem)
                         ? DOMUtilsContext.windowApi.document.documentElement
                         : elementItem;
                     for (let index = 0; index < selectorList.length; index++) {
                         const selectorItem = selectorList[index];
-                        if (target.matches(selectorItem)) {
+                        if (eventTarget.matches(selectorItem)) {
                             /* 当前目标可以被selector所匹配到 */
-                            _callback_.call(target, event);
+                            listenerCallBack.call(eventTarget, event);
                             checkOptionOnceToRemoveEventListener();
                             break;
                         }
-                        else if (target.closest(selectorItem) &&
-                            totalParent.contains(target.closest(selectorItem))) {
+                        else {
                             /* 在上层与主元素之间寻找可以被selector所匹配到的 */
-                            let closestElement = target.closest(selectorItem);
-                            /* event的target值不能直接修改 */
-                            OriginPrototype.Object.defineProperty(event, "target", {
-                                get() {
-                                    return closestElement;
-                                },
-                            });
-                            _callback_.call(closestElement, event);
-                            checkOptionOnceToRemoveEventListener();
-                            break;
+                            let $closestMatches = eventTarget.closest(selectorItem);
+                            if ($closestMatches && totalParent.contains($closestMatches)) {
+                                /* event的target值不能直接修改 */
+                                OriginPrototype.Object.defineProperty(event, "target", {
+                                    get() {
+                                        return $closestMatches;
+                                    },
+                                });
+                                listenerCallBack.call($closestMatches, event);
+                                checkOptionOnceToRemoveEventListener();
+                                break;
+                            }
                         }
                     }
                 }
                 else {
-                    _callback_.call(elementItem, event);
+                    listenerCallBack.call(elementItem, event);
                     checkOptionOnceToRemoveEventListener();
                 }
             }
             /* 遍历事件名设置元素事件 */
             eventTypeList.forEach((eventName) => {
-                elementItem.addEventListener(eventName, domUtilsEventCallBack, _option_);
+                elementItem.addEventListener(eventName, domUtilsEventCallBack, listenerOption);
                 /* 获取对象上的事件 */
                 let elementEvents = elementItem[DOMUtilsData.SymbolEvents] || {};
                 /* 初始化对象上的xx事件 */
                 elementEvents[eventName] = elementEvents[eventName] || [];
                 elementEvents[eventName].push({
                     selector: selectorList,
-                    option: _option_,
+                    option: listenerOption,
                     callback: domUtilsEventCallBack,
-                    originCallBack: _callback_,
+                    originCallBack: listenerCallBack,
                 });
                 /* 覆盖事件 */
                 // @ts-ignore
@@ -320,12 +327,13 @@ class DOMUtilsEvent {
          * @param option
          */
         function getOption(args1, startIndex, option) {
-            if (typeof args1[startIndex] === "boolean") {
-                option.capture = args1[startIndex];
+            let currentParam = args1[startIndex];
+            if (typeof currentParam === "boolean") {
+                option.capture = currentParam;
             }
-            else if (typeof args1[startIndex] === "object" &&
-                "capture" in args1[startIndex]) {
-                option.capture = args1[startIndex].capture;
+            else if (typeof currentParam === "object" &&
+                "capture" in currentParam) {
+                option.capture = currentParam.capture;
             }
             return option;
         }
@@ -363,20 +371,31 @@ class DOMUtilsEvent {
         /**
          * 事件的回调函数
          */
-        let _callback_ = callback;
+        let listenerCallBack = callback;
         /**
          * 事件的配置
          */
-        let _option_ = {
+        let listenerOption = {
             capture: false,
         };
         if (typeof selector === "function") {
             /* 这是为没有selector的情况 */
-            _callback_ = selector;
-            _option_ = getOption(args, 3, _option_);
+            listenerCallBack = selector;
+            listenerOption = getOption(args, 3, listenerOption);
         }
         else {
-            _option_ = getOption(args, 4, _option_);
+            listenerOption = getOption(args, 4, listenerOption);
+        }
+        // 是否移除所有事件
+        let isRemoveAll = false;
+        if (args.length === 2) {
+            // 目标函数、事件名
+            isRemoveAll = true;
+        }
+        else if ((args.length === 3 && typeof args[2] === "string") ||
+            Array.isArray(args[2])) {
+            // 目标函数、事件名、子元素选择器
+            isRemoveAll = true;
         }
         elementList.forEach((elementItem) => {
             /* 获取对象上的事件 */
@@ -389,26 +408,25 @@ class DOMUtilsEvent {
                 }
                 for (let index = 0; index < handlers.length; index++) {
                     let handler = handlers[index];
-                    let flag = false;
-                    if (!selectorList.length) {
-                        // selectorList是空的，默认移除
-                        flag = true;
+                    let flag = true;
+                    if (flag &&
+                        listenerCallBack &&
+                        handler.originCallBack !== listenerCallBack) {
+                        // callback不同
+                        flag = false;
                     }
-                    else {
-                        if (Array.isArray(handler.selector) &&
-                            JSON.stringify(handler.selector) === JSON.stringify(selectorList)) {
-                            // 元素上的selectorList不为空且和传入的相同
-                            flag = true;
+                    if (flag && selectorList.length && Array.isArray(handler.selector)) {
+                        if (JSON.stringify(handler.selector) !== JSON.stringify(selectorList)) {
+                            // 子元素选择器不同
+                            flag = false;
                         }
                     }
-                    if (!_callback_ ||
-                        handler.callback === _callback_ ||
-                        handler.originCallBack === _callback_) {
-                        /* callback不为空，且callback相同 */
-                        flag = true;
+                    if (flag && listenerOption.capture !== handler.option.capture) {
+                        // 事件的配置项不同
+                        flag = false;
                     }
-                    if (flag) {
-                        elementItem.removeEventListener(eventName, handler.callback, _option_);
+                    if (flag || isRemoveAll) {
+                        elementItem.removeEventListener(eventName, handler.callback, handler.option);
                         handlers.splice(index--, 1);
                     }
                 }