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