@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 +82 -61
- package/dist/index.amd.js.map +1 -1
- package/dist/index.amd.min.js +1 -1
- package/dist/index.amd.min.js.map +1 -1
- package/dist/index.cjs.js +82 -61
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.cjs.min.js +1 -1
- package/dist/index.cjs.min.js.map +1 -1
- package/dist/index.esm.js +82 -61
- package/dist/index.esm.js.map +1 -1
- package/dist/index.esm.min.js +1 -1
- package/dist/index.esm.min.js.map +1 -1
- package/dist/index.iife.js +82 -61
- package/dist/index.iife.js.map +1 -1
- package/dist/index.iife.min.js +1 -1
- package/dist/index.iife.min.js.map +1 -1
- package/dist/index.system.js +82 -61
- package/dist/index.system.js.map +1 -1
- package/dist/index.system.min.js +1 -1
- package/dist/index.system.min.js.map +1 -1
- package/dist/index.umd.js +82 -61
- package/dist/index.umd.js.map +1 -1
- package/dist/index.umd.min.js +1 -1
- package/dist/index.umd.min.js.map +1 -1
- package/dist/types/src/Pops.d.ts +6 -6
- package/dist/types/src/types/PopsDOMUtilsEventType.d.ts +3 -3
- package/dist/types/src/utils/PopsDOMUtils.d.ts +6 -6
- package/package.json +1 -1
- package/src/types/PopsDOMUtilsEventType.d.ts +3 -3
- package/src/utils/PopsDOMUtils.ts +101 -82
package/dist/index.amd.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
define((function () { 'use strict';
|
|
2
2
|
|
|
3
|
-
const version = "4.2.
|
|
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
|
|
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
|
-
|
|
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((
|
|
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((
|
|
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((
|
|
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
|
-
|
|
899
|
+
const checkOptionOnceToRemoveEventListener = ($el) => {
|
|
901
900
|
if (listenerOption.once) {
|
|
902
|
-
|
|
901
|
+
this.off($el, eventTypeList, selector, callback, option);
|
|
903
902
|
}
|
|
904
|
-
}
|
|
905
|
-
$elList.forEach((
|
|
903
|
+
};
|
|
904
|
+
$elList.forEach(($elItem) => {
|
|
906
905
|
/**
|
|
907
906
|
* 事件回调
|
|
908
907
|
* @param event
|
|
909
908
|
*/
|
|
910
|
-
function
|
|
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
|
|
915
|
-
|
|
916
|
-
|
|
917
|
-
|
|
918
|
-
|
|
919
|
-
|
|
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
|
-
|
|
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(
|
|
937
|
+
if (that.matches($target, selectors)) {
|
|
926
938
|
// 当前目标可以被selector所匹配到
|
|
927
939
|
return true;
|
|
928
940
|
}
|
|
929
941
|
// 在上层与主元素之间寻找可以被selector所匹配到的
|
|
930
|
-
const $closestMatches = that.closest(
|
|
931
|
-
if ($closestMatches &&
|
|
932
|
-
|
|
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
|
|
954
|
+
return $target;
|
|
943
955
|
},
|
|
944
956
|
});
|
|
957
|
+
// oxlint-disable-next-line no-empty
|
|
945
958
|
}
|
|
946
|
-
catch {
|
|
947
|
-
|
|
948
|
-
|
|
949
|
-
|
|
950
|
-
|
|
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
|
-
|
|
955
|
-
|
|
956
|
-
|
|
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
|
-
|
|
981
|
+
// add listener
|
|
982
|
+
$elItem.addEventListener(eventName, handlerCallBack, listenerOption);
|
|
962
983
|
// 获取对象上的事件
|
|
963
|
-
const elementEvents = Reflect.get(
|
|
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
|
-
|
|
970
|
-
|
|
990
|
+
handlerCallBack: handlerCallBack,
|
|
991
|
+
callback: listenerCallBack,
|
|
971
992
|
});
|
|
972
993
|
// 覆盖事件
|
|
973
|
-
Reflect.set(
|
|
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
|
|
987
|
-
* @param
|
|
1007
|
+
* @param extraDetails 赋予触发的Event的额外属性,如果是Event类型,那么将自动代替默认new的Event对象
|
|
1008
|
+
* @param useDispatchToTriggerEvent 是否使用dispatchEvent来触发事件,默认true,如果为false,则直接调用callback,但是这种会让使用了`$selector`的没有值
|
|
988
1009
|
*/
|
|
989
|
-
emit: (
|
|
990
|
-
that.emit($elList, eventTypeList,
|
|
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
|
|
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
|
|
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 =
|
|
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((
|
|
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((
|
|
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((
|
|
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((
|
|
1088
|
+
$elList.forEach(($elItem) => {
|
|
1068
1089
|
// 获取对象上的事件
|
|
1069
|
-
const elementEvents = Reflect.get(
|
|
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.
|
|
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
|
-
|
|
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(
|
|
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,或者在输入框内输入文字
|