@whitesev/pops 4.2.0 → 4.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.amd.js CHANGED
@@ -1,6 +1,6 @@
1
1
  define((function () { 'use strict';
2
2
 
3
- const version = "4.2.0";
3
+ const version = "4.2.1";
4
4
 
5
5
  const GlobalConfig = {
6
6
  config: {},
@@ -816,7 +816,7 @@ define((function () { 'use strict';
816
816
  * @param startIndex
817
817
  * @param option
818
818
  */
819
- function getOption(args, startIndex, option) {
819
+ const getOption = function (args, startIndex, option) {
820
820
  const currentParam = args[startIndex];
821
821
  if (typeof currentParam === "boolean") {
822
822
  option.capture = currentParam;
@@ -838,7 +838,7 @@ define((function () { 'use strict';
838
838
  option.isComposedPath = currentParam.isComposedPath;
839
839
  }
840
840
  return option;
841
- }
841
+ };
842
842
  const that = this;
843
843
  // eslint-disable-next-line prefer-rest-params
844
844
  const args = arguments;
@@ -853,8 +853,7 @@ define((function () { 'use strict';
853
853
  }
854
854
  let $elList = [];
855
855
  if (element instanceof NodeList || Array.isArray(element)) {
856
- element = element;
857
- $elList = [...element];
856
+ $elList = $elList.concat(Array.from(element));
858
857
  }
859
858
  else {
860
859
  $elList.push(element);
@@ -862,15 +861,15 @@ define((function () { 'use strict';
862
861
  // 事件名
863
862
  let eventTypeList = [];
864
863
  if (Array.isArray(eventType)) {
865
- eventTypeList = eventTypeList.concat(eventType.filter((eventTypeItem) => typeof eventTypeItem === "string" && eventTypeItem.toString() !== ""));
864
+ eventTypeList = eventTypeList.concat(eventType.filter((it) => typeof it === "string" && it.toString() !== ""));
866
865
  }
867
866
  else if (typeof eventType === "string") {
868
- eventTypeList = eventTypeList.concat(eventType.split(" ").filter((eventTypeItem) => eventTypeItem !== ""));
867
+ eventTypeList = eventTypeList.concat(eventType.split(" ").filter((it) => it !== ""));
869
868
  }
870
869
  // 子元素选择器
871
870
  let selectorList = [];
872
871
  if (Array.isArray(selector)) {
873
- selectorList = selectorList.concat(selector.filter((selectorItem) => typeof selectorItem === "string" && selectorItem.toString() !== ""));
872
+ selectorList = selectorList.concat(selector.filter((it) => typeof it === "string" && it.toString() !== ""));
874
873
  }
875
874
  else if (typeof selector === "string") {
876
875
  selectorList.push(selector);
@@ -897,39 +896,52 @@ define((function () { 'use strict';
897
896
  /**
898
897
  * 如果是once,那么删除该监听和元素上的事件和监听
899
898
  */
900
- function checkOptionOnceToRemoveEventListener() {
899
+ const checkOptionOnceToRemoveEventListener = ($el) => {
901
900
  if (listenerOption.once) {
902
- that.off(element, eventType, selector, callback, option);
901
+ this.off($el, eventTypeList, selector, callback, option);
903
902
  }
904
- }
905
- $elList.forEach((elementItem) => {
903
+ };
904
+ $elList.forEach(($elItem) => {
906
905
  /**
907
906
  * 事件回调
908
907
  * @param event
909
908
  */
910
- function domUtilsEventCallBack(event) {
909
+ const handlerCallBack = function (event) {
910
+ let call_this = void 0;
911
+ let call_event = void 0;
912
+ let call_$selector = void 0;
913
+ let execCallback = false;
911
914
  if (selectorList.length) {
912
915
  // 存在子元素选择器
913
916
  // 这时候的this和target都是子元素选择器的元素
914
- let eventTarget = listenerOption.isComposedPath
915
- ? event.composedPath()[0]
916
- : event.target;
917
- let totalParent = elementItem;
918
- if (popsUtils.isWin(totalParent)) {
919
- if (totalParent === PopsCore.document) {
920
- totalParent = PopsCore.document.documentElement;
917
+ let $target;
918
+ if (listenerOption.isComposedPath) {
919
+ // 可能为空
920
+ const composedPath = event.composedPath();
921
+ if (!composedPath.length && event.target) {
922
+ composedPath.push(event.target);
921
923
  }
924
+ $target = composedPath[0];
925
+ }
926
+ else {
927
+ $target = event.target;
922
928
  }
923
- const findValue = selectorList.find((selectorItem) => {
929
+ let $parent = $elItem;
930
+ if (popsUtils.isWin($parent)) {
931
+ // window和document共用一个对象
932
+ // 这样就能处理子元素选择器无法匹配的问题
933
+ $parent = PopsCore.document.documentElement;
934
+ }
935
+ const findValue = selectorList.find((selectors) => {
924
936
  // 判断目标元素是否匹配选择器
925
- if (that.matches(eventTarget, selectorItem)) {
937
+ if (that.matches($target, selectors)) {
926
938
  // 当前目标可以被selector所匹配到
927
939
  return true;
928
940
  }
929
941
  // 在上层与主元素之间寻找可以被selector所匹配到的
930
- const $closestMatches = that.closest(eventTarget, selectorItem);
931
- if ($closestMatches && totalParent?.contains($closestMatches)) {
932
- eventTarget = $closestMatches;
942
+ const $closestMatches = that.closest($target, selectors);
943
+ if ($closestMatches && $parent?.contains?.($closestMatches)) {
944
+ $target = $closestMatches;
933
945
  return true;
934
946
  }
935
947
  return false;
@@ -939,38 +951,47 @@ define((function () { 'use strict';
939
951
  try {
940
952
  OriginPrototype.Object.defineProperty(event, "target", {
941
953
  get() {
942
- return eventTarget;
954
+ return $target;
943
955
  },
944
956
  });
957
+ // oxlint-disable-next-line no-empty
945
958
  }
946
- catch {
947
- // 忽略
948
- }
949
- listenerCallBack.call(eventTarget, event, eventTarget);
950
- checkOptionOnceToRemoveEventListener();
959
+ catch { }
960
+ execCallback = true;
961
+ call_this = $target;
962
+ call_event = event;
963
+ call_$selector = $target;
951
964
  }
952
965
  }
953
966
  else {
954
- // 这时候的this指向监听的元素
955
- listenerCallBack.call(elementItem, event);
956
- checkOptionOnceToRemoveEventListener();
967
+ execCallback = true;
968
+ call_this = $elItem;
969
+ call_event = event;
970
+ }
971
+ if (execCallback) {
972
+ const result = listenerCallBack.call(call_this, call_event, call_$selector);
973
+ checkOptionOnceToRemoveEventListener($elItem);
974
+ if (typeof result === "boolean" && !result) {
975
+ return false;
976
+ }
957
977
  }
958
- }
978
+ };
959
979
  // 遍历事件名设置元素事件
960
980
  eventTypeList.forEach((eventName) => {
961
- elementItem.addEventListener(eventName, domUtilsEventCallBack, listenerOption);
981
+ // add listener
982
+ $elItem.addEventListener(eventName, handlerCallBack, listenerOption);
962
983
  // 获取对象上的事件
963
- const elementEvents = Reflect.get(elementItem, SymbolEvents) || {};
984
+ const elementEvents = Reflect.get($elItem, SymbolEvents) || {};
964
985
  // 初始化对象上的xx事件
965
986
  elementEvents[eventName] = elementEvents[eventName] || [];
966
987
  elementEvents[eventName].push({
967
988
  selector: selectorList,
968
989
  option: listenerOption,
969
- callback: domUtilsEventCallBack,
970
- originCallBack: listenerCallBack,
990
+ handlerCallBack: handlerCallBack,
991
+ callback: listenerCallBack,
971
992
  });
972
993
  // 覆盖事件
973
- Reflect.set(elementItem, SymbolEvents, elementEvents);
994
+ Reflect.set($elItem, SymbolEvents, elementEvents);
974
995
  });
975
996
  });
976
997
  return {
@@ -983,11 +1004,11 @@ define((function () { 'use strict';
983
1004
  },
984
1005
  /**
985
1006
  * 主动触发事件
986
- * @param details 赋予触发的Event的额外属性,如果是Event类型,那么将自动代替默认new的Event对象
987
- * @param useDispatchToEmit 是否使用dispatchEvent来触发事件,默认true,如果为false,则直接调用callback,但是这种会让使用了selectorTarget的没有值
1007
+ * @param extraDetails 赋予触发的Event的额外属性,如果是Event类型,那么将自动代替默认new的Event对象
1008
+ * @param useDispatchToTriggerEvent 是否使用dispatchEvent来触发事件,默认true,如果为false,则直接调用callback,但是这种会让使用了`$selector`的没有值
988
1009
  */
989
- emit: (details, useDispatchToEmit) => {
990
- that.emit($elList, eventTypeList, details, useDispatchToEmit);
1010
+ emit: (extraDetails, useDispatchToTriggerEvent) => {
1011
+ that.emit($elList, eventTypeList, extraDetails, useDispatchToTriggerEvent);
991
1012
  },
992
1013
  };
993
1014
  }
@@ -998,7 +1019,7 @@ define((function () { 'use strict';
998
1019
  * @param startIndex
999
1020
  * @param option
1000
1021
  */
1001
- function getOption(args1, startIndex, option) {
1022
+ const getOption = function (args1, startIndex, option) {
1002
1023
  const currentParam = args1[startIndex];
1003
1024
  if (typeof currentParam === "boolean") {
1004
1025
  option.capture = currentParam;
@@ -1007,12 +1028,12 @@ define((function () { 'use strict';
1007
1028
  option.capture = currentParam.capture;
1008
1029
  }
1009
1030
  return option;
1010
- }
1011
- const DOMUtilsContext = this;
1031
+ };
1032
+ const that = this;
1012
1033
  // eslint-disable-next-line prefer-rest-params
1013
1034
  const args = arguments;
1014
1035
  if (typeof element === "string") {
1015
- element = DOMUtilsContext.selectorAll(element);
1036
+ element = that.selectorAll(element);
1016
1037
  }
1017
1038
  if (element == null) {
1018
1039
  return;
@@ -1020,22 +1041,22 @@ define((function () { 'use strict';
1020
1041
  let $elList = [];
1021
1042
  if (element instanceof NodeList || Array.isArray(element)) {
1022
1043
  element = element;
1023
- $elList = $elList.concat(element);
1044
+ $elList = $elList.concat(Array.from(element));
1024
1045
  }
1025
1046
  else {
1026
1047
  $elList.push(element);
1027
1048
  }
1028
1049
  let eventTypeList = [];
1029
1050
  if (Array.isArray(eventType)) {
1030
- eventTypeList = eventTypeList.concat(eventType.filter((eventTypeItem) => typeof eventTypeItem === "string" && eventTypeItem.toString() !== ""));
1051
+ eventTypeList = eventTypeList.concat(eventType.filter((it) => typeof it === "string" && it.toString() !== ""));
1031
1052
  }
1032
1053
  else if (typeof eventType === "string") {
1033
- eventTypeList = eventTypeList.concat(eventType.split(" ").filter((eventTypeItem) => eventTypeItem !== ""));
1054
+ eventTypeList = eventTypeList.concat(eventType.split(" ").filter((it) => it !== ""));
1034
1055
  }
1035
1056
  // 子元素选择器
1036
1057
  let selectorList = [];
1037
1058
  if (Array.isArray(selector)) {
1038
- selectorList = selectorList.concat(selector.filter((selectorItem) => typeof selectorItem === "string" && selectorItem.toString() !== ""));
1059
+ selectorList = selectorList.concat(selector.filter((it) => typeof it === "string" && it.toString() !== ""));
1039
1060
  }
1040
1061
  else if (typeof selector === "string") {
1041
1062
  selectorList.push(selector);
@@ -1064,16 +1085,16 @@ define((function () { 'use strict';
1064
1085
  // 目标函数、事件名、回调函数、事件配置、过滤函数
1065
1086
  filter = option;
1066
1087
  }
1067
- $elList.forEach((elementItem) => {
1088
+ $elList.forEach(($elItem) => {
1068
1089
  // 获取对象上的事件
1069
- const elementEvents = Reflect.get(elementItem, SymbolEvents) || {};
1090
+ const elementEvents = Reflect.get($elItem, SymbolEvents) || {};
1070
1091
  eventTypeList.forEach((eventName) => {
1071
1092
  const handlers = elementEvents[eventName] || [];
1072
1093
  const filterHandler = typeof filter === "function" ? handlers.filter(filter) : handlers;
1073
1094
  for (let index = 0; index < filterHandler.length; index++) {
1074
1095
  const handler = filterHandler[index];
1075
1096
  let flag = true;
1076
- if (flag && listenerCallBack && handler.originCallBack !== listenerCallBack) {
1097
+ if (flag && listenerCallBack && handler.callback !== listenerCallBack) {
1077
1098
  // callback不同
1078
1099
  flag = false;
1079
1100
  }
@@ -1090,7 +1111,7 @@ define((function () { 'use strict';
1090
1111
  flag = false;
1091
1112
  }
1092
1113
  if (flag) {
1093
- elementItem.removeEventListener(eventName, handler.callback, handler.option);
1114
+ $elItem.removeEventListener(eventName, handler.handlerCallBack, handler.option);
1094
1115
  const findIndex = handlers.findIndex((item) => item === handler);
1095
1116
  if (findIndex !== -1) {
1096
1117
  handlers.splice(findIndex, 1);
@@ -1102,7 +1123,7 @@ define((function () { 'use strict';
1102
1123
  popsUtils.delete(elementEvents, eventType);
1103
1124
  }
1104
1125
  });
1105
- Reflect.set(elementItem, SymbolEvents, elementEvents);
1126
+ Reflect.set($elItem, SymbolEvents, elementEvents);
1106
1127
  });
1107
1128
  }
1108
1129
  /**
@@ -1486,11 +1507,11 @@ define((function () { 'use strict';
1486
1507
  * 阻止事件的默认行为发生,并阻止事件传播
1487
1508
  */
1488
1509
  const stopEvent = (event, onlyStopPropagation) => {
1510
+ // 停止事件的传播,阻止它继续向更上层的元素冒泡,事件将不会再传播给其他的元素
1511
+ event?.stopPropagation();
1512
+ // 阻止事件传播,并且还能阻止元素上的其他事件处理程序被触发
1513
+ event?.stopImmediatePropagation();
1489
1514
  if (typeof onlyStopPropagation === "boolean" && onlyStopPropagation) {
1490
- // 停止事件的传播,阻止它继续向更上层的元素冒泡,事件将不会再传播给其他的元素
1491
- event?.stopPropagation();
1492
- // 阻止事件传播,并且还能阻止元素上的其他事件处理程序被触发
1493
- event?.stopImmediatePropagation();
1494
1515
  return;
1495
1516
  }
1496
1517
  // 阻止事件的默认行为发生。例如,当点击一个链接时,浏览器会默认打开链接的URL,或者在输入框内输入文字