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