@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.
@@ -179,8 +179,9 @@ var DOMUtils = (function () {
179
179
  * @param option
180
180
  */
181
181
  function getOption(args, startIndex, option) {
182
- if (typeof args[startIndex] === "boolean") {
183
- option.capture = args[startIndex];
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 args[startIndex] === "object" &&
192
- ("capture" in args[startIndex] ||
193
- "once" in args[startIndex] ||
194
- "passive" in args[startIndex])) {
195
- option.capture = args[startIndex].capture;
196
- option.once = args[startIndex].once;
197
- option.passive = args[startIndex].passive;
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 _callback_ = callback;
237
+ let listenerCallBack = callback;
235
238
  // 事件配置
236
- let _option_ = {
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
- _callback_ = selector;
244
- _option_ = getOption(args, 3, _option_);
247
+ listenerCallBack = selector;
248
+ listenerOption = getOption(args, 3, listenerOption);
245
249
  }
246
250
  else {
247
251
  /* 这是存在selector的情况 */
248
- _option_ = getOption(args, 4, _option_);
252
+ listenerOption = getOption(args, 4, listenerOption);
249
253
  }
250
254
  /**
251
255
  * 如果是once,那么删除该监听和元素上的事件和监听
252
256
  */
253
257
  function checkOptionOnceToRemoveEventListener() {
254
- if (_option_.once) {
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 target = event.target;
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 (target.matches(selectorItem)) {
278
+ if (eventTarget.matches(selectorItem)) {
273
279
  /* 当前目标可以被selector所匹配到 */
274
- _callback_.call(target, event);
280
+ listenerCallBack.call(eventTarget, event);
275
281
  checkOptionOnceToRemoveEventListener();
276
282
  break;
277
283
  }
278
- else if (target.closest(selectorItem) &&
279
- totalParent.contains(target.closest(selectorItem))) {
284
+ else {
280
285
  /* 在上层与主元素之间寻找可以被selector所匹配到的 */
281
- let closestElement = target.closest(selectorItem);
282
- /* event的target值不能直接修改 */
283
- OriginPrototype.Object.defineProperty(event, "target", {
284
- get() {
285
- return closestElement;
286
- },
287
- });
288
- _callback_.call(closestElement, event);
289
- checkOptionOnceToRemoveEventListener();
290
- break;
286
+ let $closestMatches = eventTarget.closest(selectorItem);
287
+ if ($closestMatches && totalParent.contains($closestMatches)) {
288
+ /* eventtarget值不能直接修改 */
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
- _callback_.call(elementItem, event);
302
+ listenerCallBack.call(elementItem, event);
296
303
  checkOptionOnceToRemoveEventListener();
297
304
  }
298
305
  }
299
306
  /* 遍历事件名设置元素事件 */
300
307
  eventTypeList.forEach((eventName) => {
301
- elementItem.addEventListener(eventName, domUtilsEventCallBack, _option_);
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: _option_,
315
+ option: listenerOption,
309
316
  callback: domUtilsEventCallBack,
310
- originCallBack: _callback_,
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
- if (typeof args1[startIndex] === "boolean") {
327
- option.capture = args1[startIndex];
333
+ let currentParam = args1[startIndex];
334
+ if (typeof currentParam === "boolean") {
335
+ option.capture = currentParam;
328
336
  }
329
- else if (typeof args1[startIndex] === "object" &&
330
- "capture" in args1[startIndex]) {
331
- option.capture = args1[startIndex].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 _callback_ = callback;
377
+ let listenerCallBack = callback;
370
378
  /**
371
379
  * 事件的配置
372
380
  */
373
- let _option_ = {
381
+ let listenerOption = {
374
382
  capture: false,
375
383
  };
376
384
  if (typeof selector === "function") {
377
385
  /* 这是为没有selector的情况 */
378
- _callback_ = selector;
379
- _option_ = getOption(args, 3, _option_);
386
+ listenerCallBack = selector;
387
+ listenerOption = getOption(args, 3, listenerOption);
380
388
  }
381
389
  else {
382
- _option_ = getOption(args, 4, _option_);
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 = false;
396
- if (!selectorList.length) {
397
- // selectorList是空的,默认移除
398
- flag = true;
414
+ let flag = true;
415
+ if (flag &&
416
+ listenerCallBack &&
417
+ handler.originCallBack !== listenerCallBack) {
418
+ // callback不同
419
+ flag = false;
399
420
  }
400
- else {
401
- if (Array.isArray(handler.selector) &&
402
- JSON.stringify(handler.selector) === JSON.stringify(selectorList)) {
403
- // 元素上的selectorList不为空且和传入的相同
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 (!_callback_ ||
408
- handler.callback === _callback_ ||
409
- handler.originCallBack === _callback_) {
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, _option_);
431
+ if (flag || isRemoveAll) {
432
+ elementItem.removeEventListener(eventName, handler.callback, handler.option);
415
433
  handlers.splice(index--, 1);
416
434
  }
417
435
  }