@whitesev/domutils 1.9.10 → 1.9.12

package/dist/index.umd.js

@@ -4,7 +4,7 @@
   (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.DOMUtils = factory());
 })(this, (function () { 'use strict';
 
-  const version = "1.9.10";
+  const version = "1.9.12";
 
   class WindowApi {
       /** 默认的配置 */
@@ -1461,91 +1461,97 @@
               // 这是存在selector的情况
               listenerOption = getOption(args, 4, listenerOption);
           }
-          /**
-           * 如果是once，那么删除该监听和元素上的事件和监听
-           */
-          const checkOptionOnceToRemoveEventListener = ($el) => {
-              if (listenerOption.once) {
-                  this.off($el, eventTypeList, selector, callback, option);
-              }
-          };
           $elList.forEach(($elItem) => {
-              /**
-               * 事件回调
-               * @param event
-               */
-              const handlerCallBack = function (event) {
-                  let call_this = void 0;
-                  let call_event = void 0;
-                  let call_$selector = void 0;
-                  let execCallback = false;
-                  if (selectorList.length) {
-                      // 存在子元素选择器
-                      // 这时候的this和target都是子元素选择器的元素
-                      let $target;
-                      if (listenerOption.isComposedPath) {
-                          // 可能为空
-                          const composedPath = event.composedPath();
-                          if (!composedPath.length && event.target) {
-                              composedPath.push(event.target);
-                          }
-                          $target = composedPath[0];
-                      }
-                      else {
-                          $target = event.target;
-                      }
-                      let $parent = $elItem;
-                      if (CommonUtils.isWin($parent)) {
-                          // window和document共用一个对象
-                          // 这样就能处理子元素选择器无法匹配的问题
-                          $parent = that.windowApi.document.documentElement;
+              // 遍历事件名设置元素事件
+              eventTypeList.forEach((eventName) => {
+                  /**
+                   * 如果是option.once，那么删除该监听和元素上的事件和监听
+                   */
+                  const checkOptionOnceToRemoveEventListener = () => {
+                      if (listenerOption.once) {
+                          this.off($elItem, eventName, selector, callback, option);
                       }
-                      const findValue = selectorList.find((selectors) => {
-                          // 判断目标元素是否匹配选择器
-                          if (that.matches($target, selectors)) {
-                              // 当前目标可以被selector所匹配到
-                              return true;
+                  };
+                  /**
+                   * 事件回调
+                   * @param event
+                   */
+                  const handlerCallBack = function (event) {
+                      let call_this = void 0;
+                      let call_event = void 0;
+                      let call_$selector = void 0;
+                      let execCallback = false;
+                      if (selectorList.length) {
+                          // 存在子元素选择器
+                          // 这时候的this和target都是子元素选择器的元素
+                          let $target;
+                          if (listenerOption.isComposedPath) {
+                              // 可能为空
+                              const composedPath = event.composedPath();
+                              if (!composedPath.length && event.target) {
+                                  composedPath.push(event.target);
+                              }
+                              $target = composedPath[0];
                           }
-                          // 在上层与主元素之间寻找可以被selector所匹配到的
-                          const $closestMatches = that.closest($target, selectors);
-                          if ($closestMatches && $parent?.contains?.($closestMatches)) {
-                              $target = $closestMatches;
-                              return true;
+                          else {
+                              $target = event.target;
                           }
-                          return false;
-                      });
-                      if (findValue) {
-                          // 这里尝试使用defineProperty修改event的target值
-                          try {
-                              OriginPrototype.Object.defineProperty(event, "target", {
-                                  get() {
-                                      return $target;
-                                  },
-                              });
-                              // oxlint-disable-next-line no-empty
+                          let $parent = $elItem;
+                          if (CommonUtils.isWin($parent)) {
+                              // window和document共用一个对象
+                              // 这样就能处理子元素选择器无法匹配的问题
+                              $parent = that.windowApi.document.documentElement;
+                          }
+                          const findValue = selectorList.find((selectors) => {
+                              // 判断目标元素是否匹配选择器
+                              if (that.matches($target, selectors)) {
+                                  // 当前目标可以被selector所匹配到
+                                  return true;
+                              }
+                              // 在上层与主元素之间寻找可以被selector所匹配到的
+                              const $closestMatches = that.closest($target, selectors);
+                              if ($closestMatches && $parent?.contains?.($closestMatches)) {
+                                  $target = $closestMatches;
+                                  return true;
+                              }
+                              return false;
+                          });
+                          if (findValue) {
+                              // 这里尝试使用defineProperty修改event的target值
+                              const originTarget = event.target;
+                              try {
+                                  OriginPrototype.Object.defineProperty(event, "target", {
+                                      get() {
+                                          return $target;
+                                      },
+                                  });
+                                  OriginPrototype.Object.defineProperty(event, "originTarget", {
+                                      get() {
+                                          return originTarget;
+                                      },
+                                  });
+                                  // oxlint-disable-next-line no-empty
+                              }
+                              catch { }
+                              execCallback = true;
+                              call_this = $target;
+                              call_event = event;
+                              call_$selector = $target;
                           }
-                          catch { }
+                      }
+                      else {
                           execCallback = true;
-                          call_this = $target;
+                          call_this = $elItem;
                           call_event = event;
-                          call_$selector = $target;
                       }
-                  }
-                  else {
-                      execCallback = true;
-                      call_this = $elItem;
-                      call_event = event;
-                  }
-                  if (execCallback) {
-                      const result = listenerCallBack.call(call_this, call_event, call_$selector);
-                      checkOptionOnceToRemoveEventListener($elItem);
-                      if (typeof result === "boolean" && !result) {
-                          return false;
+                      if (execCallback) {
+                          const result = listenerCallBack.call(call_this, call_event, call_$selector);
+                          checkOptionOnceToRemoveEventListener();
+                          if (typeof result === "boolean" && !result) {
+                              return false;
+                          }
                       }
-                  }
-              };
-              // 遍历事件名设置元素事件
-              eventTypeList.forEach((eventName) => {
+                  };
                   // add listener
                   $elItem.addEventListener(eventName, handlerCallBack, listenerOption);
                   // 获取对象上的事件
@@ -1658,31 +1664,34 @@
               const elementEvents = Reflect.get($elItem, GlobalData.domEventSymbol) || {};
               eventTypeList.forEach((eventName) => {
                   const handlers = elementEvents[eventName] || [];
-                  const filterHandler = typeof filter === "function" ? handlers.filter(filter) : handlers;
-                  for (let index = 0; index < filterHandler.length; index++) {
-                      const handler = filterHandler[index];
+                  // 过滤出需要删除的事件
+                  const handlersFiltered = typeof filter === "function" ? handlers.filter(filter) : handlers;
+                  for (let index = 0; index < handlersFiltered.length; index++) {
+                      const handler = handlersFiltered[index];
+                      // 过滤出的事件再根据下面的条件进行判断处理移除
+                      // 1. callback内存地址必须相同
+                      // 2. selector必须相同
+                      // 3. option.capture必须相同
                       let flag = true;
                       if (flag && listenerCallBack && handler.callback !== listenerCallBack) {
-                          // callback不同
                           flag = false;
                       }
                       if (flag && selectorList.length && Array.isArray(handler.selector)) {
                           if (JSON.stringify(handler.selector) !== JSON.stringify(selectorList)) {
-                              // 子元素选择器不同
                               flag = false;
                           }
                       }
                       if (flag &&
                           typeof handler.option.capture === "boolean" &&
                           listenerOption.capture !== handler.option.capture) {
-                          // 事件的配置项不同
                           flag = false;
                       }
                       if (flag) {
                           $elItem.removeEventListener(eventName, handler.handlerCallBack, handler.option);
-                          const findIndex = handlers.findIndex((item) => item === handler);
-                          if (findIndex !== -1) {
-                              handlers.splice(findIndex, 1);
+                          for (let i = handlers.length - 1; i >= 0; i--) {
+                              if (handlers[i] === handler) {
+                                  handlers.splice(i, 1);
+                              }
                           }
                       }
                   }