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