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