@whitesev/domutils 1.4.3 → 1.4.5
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 +84 -62
- package/dist/index.amd.js.map +1 -1
- package/dist/index.cjs.js +84 -62
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +84 -62
- package/dist/index.esm.js.map +1 -1
- package/dist/index.iife.js +84 -62
- package/dist/index.iife.js.map +1 -1
- package/dist/index.system.js +84 -62
- package/dist/index.system.js.map +1 -1
- package/dist/index.umd.js +84 -62
- package/dist/index.umd.js.map +1 -1
- package/dist/types/src/DOMUtilsEvent.d.ts +18 -18
- package/dist/types/src/types/DOMUtilsEvent.d.ts +12 -1
- package/package.json +1 -1
- package/src/DOMUtils.ts +1 -1
- package/src/DOMUtilsEvent.ts +138 -103
- package/src/types/DOMUtilsEvent.d.ts +12 -1
package/dist/index.iife.js
CHANGED
|
@@ -179,8 +179,9 @@ var DOMUtils = (function () {
|
|
|
179
179
|
* @param option
|
|
180
180
|
*/
|
|
181
181
|
function getOption(args, startIndex, option) {
|
|
182
|
-
|
|
183
|
-
|
|
182
|
+
let currentParam = args[startIndex];
|
|
183
|
+
if (typeof currentParam === "boolean") {
|
|
184
|
+
option.capture = currentParam;
|
|
184
185
|
if (typeof args[startIndex + 1] === "boolean") {
|
|
185
186
|
option.once = args[startIndex + 1];
|
|
186
187
|
}
|
|
@@ -188,13 +189,15 @@ var DOMUtils = (function () {
|
|
|
188
189
|
option.passive = args[startIndex + 2];
|
|
189
190
|
}
|
|
190
191
|
}
|
|
191
|
-
else if (typeof
|
|
192
|
-
("capture" in
|
|
193
|
-
"once" in
|
|
194
|
-
"passive" in
|
|
195
|
-
|
|
196
|
-
option.
|
|
197
|
-
option.
|
|
192
|
+
else if (typeof currentParam === "object" &&
|
|
193
|
+
("capture" in currentParam ||
|
|
194
|
+
"once" in currentParam ||
|
|
195
|
+
"passive" in currentParam ||
|
|
196
|
+
"isComposedPath" in currentParam)) {
|
|
197
|
+
option.capture = currentParam.capture;
|
|
198
|
+
option.once = currentParam.once;
|
|
199
|
+
option.passive = currentParam.passive;
|
|
200
|
+
option.isComposedPath = currentParam.isComposedPath;
|
|
198
201
|
}
|
|
199
202
|
return option;
|
|
200
203
|
}
|
|
@@ -231,27 +234,28 @@ var DOMUtils = (function () {
|
|
|
231
234
|
selectorList.push(selector);
|
|
232
235
|
}
|
|
233
236
|
// 事件回调
|
|
234
|
-
let
|
|
237
|
+
let listenerCallBack = callback;
|
|
235
238
|
// 事件配置
|
|
236
|
-
let
|
|
239
|
+
let listenerOption = {
|
|
237
240
|
capture: false,
|
|
238
241
|
once: false,
|
|
239
242
|
passive: false,
|
|
243
|
+
isComposedPath: false,
|
|
240
244
|
};
|
|
241
245
|
if (typeof selector === "function") {
|
|
242
246
|
/* 这是为没有selector的情况 */
|
|
243
|
-
|
|
244
|
-
|
|
247
|
+
listenerCallBack = selector;
|
|
248
|
+
listenerOption = getOption(args, 3, listenerOption);
|
|
245
249
|
}
|
|
246
250
|
else {
|
|
247
251
|
/* 这是存在selector的情况 */
|
|
248
|
-
|
|
252
|
+
listenerOption = getOption(args, 4, listenerOption);
|
|
249
253
|
}
|
|
250
254
|
/**
|
|
251
255
|
* 如果是once,那么删除该监听和元素上的事件和监听
|
|
252
256
|
*/
|
|
253
257
|
function checkOptionOnceToRemoveEventListener() {
|
|
254
|
-
if (
|
|
258
|
+
if (listenerOption.once) {
|
|
255
259
|
DOMUtilsContext.off(element, eventType, selector, callback, option);
|
|
256
260
|
}
|
|
257
261
|
}
|
|
@@ -261,53 +265,60 @@ var DOMUtils = (function () {
|
|
|
261
265
|
* @param event
|
|
262
266
|
*/
|
|
263
267
|
function domUtilsEventCallBack(event) {
|
|
264
|
-
let
|
|
268
|
+
let eventTarget = listenerOption.isComposedPath
|
|
269
|
+
? event.composedPath()[0]
|
|
270
|
+
: event.target;
|
|
265
271
|
if (selectorList.length) {
|
|
266
|
-
/*
|
|
272
|
+
/* 存在子元素选择器 */
|
|
267
273
|
let totalParent = DOMUtilsCommonUtils.isWin(elementItem)
|
|
268
274
|
? DOMUtilsContext.windowApi.document.documentElement
|
|
269
275
|
: elementItem;
|
|
270
276
|
for (let index = 0; index < selectorList.length; index++) {
|
|
271
277
|
const selectorItem = selectorList[index];
|
|
272
|
-
if (
|
|
278
|
+
if (eventTarget.matches(selectorItem)) {
|
|
273
279
|
/* 当前目标可以被selector所匹配到 */
|
|
274
|
-
|
|
280
|
+
listenerCallBack.call(eventTarget, event);
|
|
275
281
|
checkOptionOnceToRemoveEventListener();
|
|
276
282
|
break;
|
|
277
283
|
}
|
|
278
|
-
else
|
|
279
|
-
totalParent.contains(target.closest(selectorItem))) {
|
|
284
|
+
else {
|
|
280
285
|
/* 在上层与主元素之间寻找可以被selector所匹配到的 */
|
|
281
|
-
let
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
286
|
+
let $closestMatches = eventTarget.closest(selectorItem);
|
|
287
|
+
if ($closestMatches && totalParent.contains($closestMatches)) {
|
|
288
|
+
/* event的target值不能直接修改 */
|
|
289
|
+
// 这里尝试使用defineProperty修改event的target值
|
|
290
|
+
try {
|
|
291
|
+
OriginPrototype.Object.defineProperty(event, "target", {
|
|
292
|
+
get() {
|
|
293
|
+
return $closestMatches;
|
|
294
|
+
},
|
|
295
|
+
});
|
|
296
|
+
}
|
|
297
|
+
catch (error) { }
|
|
298
|
+
listenerCallBack.call($closestMatches, event);
|
|
299
|
+
checkOptionOnceToRemoveEventListener();
|
|
300
|
+
break;
|
|
301
|
+
}
|
|
291
302
|
}
|
|
292
303
|
}
|
|
293
304
|
}
|
|
294
305
|
else {
|
|
295
|
-
|
|
306
|
+
listenerCallBack.call(elementItem, event);
|
|
296
307
|
checkOptionOnceToRemoveEventListener();
|
|
297
308
|
}
|
|
298
309
|
}
|
|
299
310
|
/* 遍历事件名设置元素事件 */
|
|
300
311
|
eventTypeList.forEach((eventName) => {
|
|
301
|
-
elementItem.addEventListener(eventName, domUtilsEventCallBack,
|
|
312
|
+
elementItem.addEventListener(eventName, domUtilsEventCallBack, listenerOption);
|
|
302
313
|
/* 获取对象上的事件 */
|
|
303
314
|
let elementEvents = elementItem[DOMUtilsData.SymbolEvents] || {};
|
|
304
315
|
/* 初始化对象上的xx事件 */
|
|
305
316
|
elementEvents[eventName] = elementEvents[eventName] || [];
|
|
306
317
|
elementEvents[eventName].push({
|
|
307
318
|
selector: selectorList,
|
|
308
|
-
option:
|
|
319
|
+
option: listenerOption,
|
|
309
320
|
callback: domUtilsEventCallBack,
|
|
310
|
-
originCallBack:
|
|
321
|
+
originCallBack: listenerCallBack,
|
|
311
322
|
});
|
|
312
323
|
/* 覆盖事件 */
|
|
313
324
|
// @ts-ignore
|
|
@@ -323,12 +334,13 @@ var DOMUtils = (function () {
|
|
|
323
334
|
* @param option
|
|
324
335
|
*/
|
|
325
336
|
function getOption(args1, startIndex, option) {
|
|
326
|
-
|
|
327
|
-
|
|
337
|
+
let currentParam = args1[startIndex];
|
|
338
|
+
if (typeof currentParam === "boolean") {
|
|
339
|
+
option.capture = currentParam;
|
|
328
340
|
}
|
|
329
|
-
else if (typeof
|
|
330
|
-
"capture" in
|
|
331
|
-
option.capture =
|
|
341
|
+
else if (typeof currentParam === "object" &&
|
|
342
|
+
"capture" in currentParam) {
|
|
343
|
+
option.capture = currentParam.capture;
|
|
332
344
|
}
|
|
333
345
|
return option;
|
|
334
346
|
}
|
|
@@ -366,20 +378,31 @@ var DOMUtils = (function () {
|
|
|
366
378
|
/**
|
|
367
379
|
* 事件的回调函数
|
|
368
380
|
*/
|
|
369
|
-
let
|
|
381
|
+
let listenerCallBack = callback;
|
|
370
382
|
/**
|
|
371
383
|
* 事件的配置
|
|
372
384
|
*/
|
|
373
|
-
let
|
|
385
|
+
let listenerOption = {
|
|
374
386
|
capture: false,
|
|
375
387
|
};
|
|
376
388
|
if (typeof selector === "function") {
|
|
377
389
|
/* 这是为没有selector的情况 */
|
|
378
|
-
|
|
379
|
-
|
|
390
|
+
listenerCallBack = selector;
|
|
391
|
+
listenerOption = getOption(args, 3, listenerOption);
|
|
380
392
|
}
|
|
381
393
|
else {
|
|
382
|
-
|
|
394
|
+
listenerOption = getOption(args, 4, listenerOption);
|
|
395
|
+
}
|
|
396
|
+
// 是否移除所有事件
|
|
397
|
+
let isRemoveAll = false;
|
|
398
|
+
if (args.length === 2) {
|
|
399
|
+
// 目标函数、事件名
|
|
400
|
+
isRemoveAll = true;
|
|
401
|
+
}
|
|
402
|
+
else if ((args.length === 3 && typeof args[2] === "string") ||
|
|
403
|
+
Array.isArray(args[2])) {
|
|
404
|
+
// 目标函数、事件名、子元素选择器
|
|
405
|
+
isRemoveAll = true;
|
|
383
406
|
}
|
|
384
407
|
elementList.forEach((elementItem) => {
|
|
385
408
|
/* 获取对象上的事件 */
|
|
@@ -392,26 +415,25 @@ var DOMUtils = (function () {
|
|
|
392
415
|
}
|
|
393
416
|
for (let index = 0; index < handlers.length; index++) {
|
|
394
417
|
let handler = handlers[index];
|
|
395
|
-
let flag =
|
|
396
|
-
if (
|
|
397
|
-
|
|
398
|
-
|
|
418
|
+
let flag = true;
|
|
419
|
+
if (flag &&
|
|
420
|
+
listenerCallBack &&
|
|
421
|
+
handler.originCallBack !== listenerCallBack) {
|
|
422
|
+
// callback不同
|
|
423
|
+
flag = false;
|
|
399
424
|
}
|
|
400
|
-
|
|
401
|
-
if (
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
flag = true;
|
|
425
|
+
if (flag && selectorList.length && Array.isArray(handler.selector)) {
|
|
426
|
+
if (JSON.stringify(handler.selector) !== JSON.stringify(selectorList)) {
|
|
427
|
+
// 子元素选择器不同
|
|
428
|
+
flag = false;
|
|
405
429
|
}
|
|
406
430
|
}
|
|
407
|
-
if (
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
/* callback不为空,且callback相同 */
|
|
411
|
-
flag = true;
|
|
431
|
+
if (flag && listenerOption.capture !== handler.option.capture) {
|
|
432
|
+
// 事件的配置项不同
|
|
433
|
+
flag = false;
|
|
412
434
|
}
|
|
413
|
-
if (flag) {
|
|
414
|
-
elementItem.removeEventListener(eventName, handler.callback,
|
|
435
|
+
if (flag || isRemoveAll) {
|
|
436
|
+
elementItem.removeEventListener(eventName, handler.callback, handler.option);
|
|
415
437
|
handlers.splice(index--, 1);
|
|
416
438
|
}
|
|
417
439
|
}
|
|
@@ -1013,7 +1035,7 @@ var DOMUtils = (function () {
|
|
|
1013
1035
|
super(option);
|
|
1014
1036
|
}
|
|
1015
1037
|
/** 版本号 */
|
|
1016
|
-
version = "2024.12.
|
|
1038
|
+
version = "2024.12.4";
|
|
1017
1039
|
attr(element, attrName, attrValue) {
|
|
1018
1040
|
let DOMUtilsContext = this;
|
|
1019
1041
|
if (typeof element === "string") {
|