@whitesev/domutils 1.4.3 → 1.4.4
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 +79 -61
- package/dist/index.amd.js.map +1 -1
- package/dist/index.cjs.js +79 -61
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +79 -61
- package/dist/index.esm.js.map +1 -1
- package/dist/index.iife.js +79 -61
- package/dist/index.iife.js.map +1 -1
- package/dist/index.system.js +79 -61
- package/dist/index.system.js.map +1 -1
- package/dist/index.umd.js +79 -61
- 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/DOMUtilsEvent.ts +135 -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,56 @@ 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
|
+
OriginPrototype.Object.defineProperty(event, "target", {
|
|
289
|
+
get() {
|
|
290
|
+
return $closestMatches;
|
|
291
|
+
},
|
|
292
|
+
});
|
|
293
|
+
listenerCallBack.call($closestMatches, event);
|
|
294
|
+
checkOptionOnceToRemoveEventListener();
|
|
295
|
+
break;
|
|
296
|
+
}
|
|
290
297
|
}
|
|
291
298
|
}
|
|
292
299
|
}
|
|
293
300
|
else {
|
|
294
|
-
|
|
301
|
+
listenerCallBack.call(elementItem, event);
|
|
295
302
|
checkOptionOnceToRemoveEventListener();
|
|
296
303
|
}
|
|
297
304
|
}
|
|
298
305
|
/* 遍历事件名设置元素事件 */
|
|
299
306
|
eventTypeList.forEach((eventName) => {
|
|
300
|
-
elementItem.addEventListener(eventName, domUtilsEventCallBack,
|
|
307
|
+
elementItem.addEventListener(eventName, domUtilsEventCallBack, listenerOption);
|
|
301
308
|
/* 获取对象上的事件 */
|
|
302
309
|
let elementEvents = elementItem[DOMUtilsData.SymbolEvents] || {};
|
|
303
310
|
/* 初始化对象上的xx事件 */
|
|
304
311
|
elementEvents[eventName] = elementEvents[eventName] || [];
|
|
305
312
|
elementEvents[eventName].push({
|
|
306
313
|
selector: selectorList,
|
|
307
|
-
option:
|
|
314
|
+
option: listenerOption,
|
|
308
315
|
callback: domUtilsEventCallBack,
|
|
309
|
-
originCallBack:
|
|
316
|
+
originCallBack: listenerCallBack,
|
|
310
317
|
});
|
|
311
318
|
/* 覆盖事件 */
|
|
312
319
|
// @ts-ignore
|
|
@@ -322,12 +329,13 @@ define((function () { 'use strict';
|
|
|
322
329
|
* @param option
|
|
323
330
|
*/
|
|
324
331
|
function getOption(args1, startIndex, option) {
|
|
325
|
-
|
|
326
|
-
|
|
332
|
+
let currentParam = args1[startIndex];
|
|
333
|
+
if (typeof currentParam === "boolean") {
|
|
334
|
+
option.capture = currentParam;
|
|
327
335
|
}
|
|
328
|
-
else if (typeof
|
|
329
|
-
"capture" in
|
|
330
|
-
option.capture =
|
|
336
|
+
else if (typeof currentParam === "object" &&
|
|
337
|
+
"capture" in currentParam) {
|
|
338
|
+
option.capture = currentParam.capture;
|
|
331
339
|
}
|
|
332
340
|
return option;
|
|
333
341
|
}
|
|
@@ -365,20 +373,31 @@ define((function () { 'use strict';
|
|
|
365
373
|
/**
|
|
366
374
|
* 事件的回调函数
|
|
367
375
|
*/
|
|
368
|
-
let
|
|
376
|
+
let listenerCallBack = callback;
|
|
369
377
|
/**
|
|
370
378
|
* 事件的配置
|
|
371
379
|
*/
|
|
372
|
-
let
|
|
380
|
+
let listenerOption = {
|
|
373
381
|
capture: false,
|
|
374
382
|
};
|
|
375
383
|
if (typeof selector === "function") {
|
|
376
384
|
/* 这是为没有selector的情况 */
|
|
377
|
-
|
|
378
|
-
|
|
385
|
+
listenerCallBack = selector;
|
|
386
|
+
listenerOption = getOption(args, 3, listenerOption);
|
|
379
387
|
}
|
|
380
388
|
else {
|
|
381
|
-
|
|
389
|
+
listenerOption = getOption(args, 4, listenerOption);
|
|
390
|
+
}
|
|
391
|
+
// 是否移除所有事件
|
|
392
|
+
let isRemoveAll = false;
|
|
393
|
+
if (args.length === 2) {
|
|
394
|
+
// 目标函数、事件名
|
|
395
|
+
isRemoveAll = true;
|
|
396
|
+
}
|
|
397
|
+
else if ((args.length === 3 && typeof args[2] === "string") ||
|
|
398
|
+
Array.isArray(args[2])) {
|
|
399
|
+
// 目标函数、事件名、子元素选择器
|
|
400
|
+
isRemoveAll = true;
|
|
382
401
|
}
|
|
383
402
|
elementList.forEach((elementItem) => {
|
|
384
403
|
/* 获取对象上的事件 */
|
|
@@ -391,26 +410,25 @@ define((function () { 'use strict';
|
|
|
391
410
|
}
|
|
392
411
|
for (let index = 0; index < handlers.length; index++) {
|
|
393
412
|
let handler = handlers[index];
|
|
394
|
-
let flag =
|
|
395
|
-
if (
|
|
396
|
-
|
|
397
|
-
|
|
413
|
+
let flag = true;
|
|
414
|
+
if (flag &&
|
|
415
|
+
listenerCallBack &&
|
|
416
|
+
handler.originCallBack !== listenerCallBack) {
|
|
417
|
+
// callback不同
|
|
418
|
+
flag = false;
|
|
398
419
|
}
|
|
399
|
-
|
|
400
|
-
if (
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
flag = true;
|
|
420
|
+
if (flag && selectorList.length && Array.isArray(handler.selector)) {
|
|
421
|
+
if (JSON.stringify(handler.selector) !== JSON.stringify(selectorList)) {
|
|
422
|
+
// 子元素选择器不同
|
|
423
|
+
flag = false;
|
|
404
424
|
}
|
|
405
425
|
}
|
|
406
|
-
if (
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
/* callback不为空,且callback相同 */
|
|
410
|
-
flag = true;
|
|
426
|
+
if (flag && listenerOption.capture !== handler.option.capture) {
|
|
427
|
+
// 事件的配置项不同
|
|
428
|
+
flag = false;
|
|
411
429
|
}
|
|
412
|
-
if (flag) {
|
|
413
|
-
elementItem.removeEventListener(eventName, handler.callback,
|
|
430
|
+
if (flag || isRemoveAll) {
|
|
431
|
+
elementItem.removeEventListener(eventName, handler.callback, handler.option);
|
|
414
432
|
handlers.splice(index--, 1);
|
|
415
433
|
}
|
|
416
434
|
}
|