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