@whitesev/domutils 1.9.9 → 1.9.10
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 +68 -46
- package/dist/index.amd.js.map +1 -1
- package/dist/index.amd.min.js +1 -1
- package/dist/index.amd.min.js.map +1 -1
- package/dist/index.cjs.js +68 -46
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.cjs.min.js +1 -1
- package/dist/index.cjs.min.js.map +1 -1
- package/dist/index.esm.js +68 -46
- package/dist/index.esm.js.map +1 -1
- package/dist/index.esm.min.js +1 -1
- package/dist/index.esm.min.js.map +1 -1
- package/dist/index.iife.js +68 -46
- package/dist/index.iife.js.map +1 -1
- package/dist/index.iife.min.js +1 -1
- package/dist/index.iife.min.js.map +1 -1
- package/dist/index.system.js +68 -46
- package/dist/index.system.js.map +1 -1
- package/dist/index.system.min.js +1 -1
- package/dist/index.system.min.js.map +1 -1
- package/dist/index.umd.js +68 -46
- package/dist/index.umd.js.map +1 -1
- package/dist/index.umd.min.js +1 -1
- package/dist/index.umd.min.js.map +1 -1
- package/dist/types/src/ElementEvent.d.ts +2 -2
- package/dist/types/src/types/DOMUtilsEvent.d.ts +1 -0
- package/package.json +1 -1
- package/src/ElementEvent.ts +74 -49
- package/src/types/DOMUtilsEvent.d.ts +1 -0
package/dist/index.amd.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
define((function () { 'use strict';
|
|
2
2
|
|
|
3
|
-
const version = "1.9.
|
|
3
|
+
const version = "1.9.10";
|
|
4
4
|
|
|
5
5
|
class WindowApi {
|
|
6
6
|
/** 默认的配置 */
|
|
@@ -1380,7 +1380,7 @@ define((function () { 'use strict';
|
|
|
1380
1380
|
* @param startIndex
|
|
1381
1381
|
* @param option
|
|
1382
1382
|
*/
|
|
1383
|
-
function
|
|
1383
|
+
const getOption = function (args, startIndex, option) {
|
|
1384
1384
|
const currentParam = args[startIndex];
|
|
1385
1385
|
if (typeof currentParam === "boolean") {
|
|
1386
1386
|
option.capture = currentParam;
|
|
@@ -1402,7 +1402,7 @@ define((function () { 'use strict';
|
|
|
1402
1402
|
option.isComposedPath = currentParam.isComposedPath;
|
|
1403
1403
|
}
|
|
1404
1404
|
return option;
|
|
1405
|
-
}
|
|
1405
|
+
};
|
|
1406
1406
|
const that = this;
|
|
1407
1407
|
// eslint-disable-next-line prefer-rest-params
|
|
1408
1408
|
const args = arguments;
|
|
@@ -1460,39 +1460,52 @@ define((function () { 'use strict';
|
|
|
1460
1460
|
/**
|
|
1461
1461
|
* 如果是once,那么删除该监听和元素上的事件和监听
|
|
1462
1462
|
*/
|
|
1463
|
-
const checkOptionOnceToRemoveEventListener = () => {
|
|
1463
|
+
const checkOptionOnceToRemoveEventListener = ($el) => {
|
|
1464
1464
|
if (listenerOption.once) {
|
|
1465
|
-
|
|
1465
|
+
this.off($el, eventTypeList, selector, callback, option);
|
|
1466
1466
|
}
|
|
1467
1467
|
};
|
|
1468
|
-
$elList.forEach((
|
|
1468
|
+
$elList.forEach(($elItem) => {
|
|
1469
1469
|
/**
|
|
1470
1470
|
* 事件回调
|
|
1471
1471
|
* @param event
|
|
1472
1472
|
*/
|
|
1473
1473
|
const handlerCallBack = function (event) {
|
|
1474
|
+
let call_this = void 0;
|
|
1475
|
+
let call_event = void 0;
|
|
1476
|
+
let call_$selector = void 0;
|
|
1477
|
+
let execCallback = false;
|
|
1474
1478
|
if (selectorList.length) {
|
|
1475
|
-
|
|
1479
|
+
// 存在子元素选择器
|
|
1476
1480
|
// 这时候的this和target都是子元素选择器的元素
|
|
1477
|
-
let
|
|
1478
|
-
|
|
1479
|
-
|
|
1480
|
-
|
|
1481
|
-
|
|
1482
|
-
|
|
1483
|
-
totalParent = that.windowApi.document.documentElement;
|
|
1481
|
+
let $target;
|
|
1482
|
+
if (listenerOption.isComposedPath) {
|
|
1483
|
+
// 可能为空
|
|
1484
|
+
const composedPath = event.composedPath();
|
|
1485
|
+
if (!composedPath.length && event.target) {
|
|
1486
|
+
composedPath.push(event.target);
|
|
1484
1487
|
}
|
|
1488
|
+
$target = composedPath[0];
|
|
1489
|
+
}
|
|
1490
|
+
else {
|
|
1491
|
+
$target = event.target;
|
|
1492
|
+
}
|
|
1493
|
+
let $parent = $elItem;
|
|
1494
|
+
if (CommonUtils.isWin($parent)) {
|
|
1495
|
+
// window和document共用一个对象
|
|
1496
|
+
// 这样就能处理子元素选择器无法匹配的问题
|
|
1497
|
+
$parent = that.windowApi.document.documentElement;
|
|
1485
1498
|
}
|
|
1486
|
-
const findValue = selectorList.find((
|
|
1499
|
+
const findValue = selectorList.find((selectors) => {
|
|
1487
1500
|
// 判断目标元素是否匹配选择器
|
|
1488
|
-
if (that.matches(
|
|
1489
|
-
|
|
1501
|
+
if (that.matches($target, selectors)) {
|
|
1502
|
+
// 当前目标可以被selector所匹配到
|
|
1490
1503
|
return true;
|
|
1491
1504
|
}
|
|
1492
|
-
|
|
1493
|
-
const $closestMatches = that.closest(
|
|
1494
|
-
if ($closestMatches &&
|
|
1495
|
-
|
|
1505
|
+
// 在上层与主元素之间寻找可以被selector所匹配到的
|
|
1506
|
+
const $closestMatches = that.closest($target, selectors);
|
|
1507
|
+
if ($closestMatches && $parent?.contains?.($closestMatches)) {
|
|
1508
|
+
$target = $closestMatches;
|
|
1496
1509
|
return true;
|
|
1497
1510
|
}
|
|
1498
1511
|
return false;
|
|
@@ -1502,29 +1515,38 @@ define((function () { 'use strict';
|
|
|
1502
1515
|
try {
|
|
1503
1516
|
OriginPrototype.Object.defineProperty(event, "target", {
|
|
1504
1517
|
get() {
|
|
1505
|
-
return
|
|
1518
|
+
return $target;
|
|
1506
1519
|
},
|
|
1507
1520
|
});
|
|
1521
|
+
// oxlint-disable-next-line no-empty
|
|
1508
1522
|
}
|
|
1509
|
-
catch {
|
|
1510
|
-
|
|
1511
|
-
|
|
1512
|
-
|
|
1513
|
-
|
|
1523
|
+
catch { }
|
|
1524
|
+
execCallback = true;
|
|
1525
|
+
call_this = $target;
|
|
1526
|
+
call_event = event;
|
|
1527
|
+
call_$selector = $target;
|
|
1514
1528
|
}
|
|
1515
1529
|
}
|
|
1516
1530
|
else {
|
|
1517
|
-
|
|
1518
|
-
|
|
1519
|
-
|
|
1531
|
+
execCallback = true;
|
|
1532
|
+
call_this = $elItem;
|
|
1533
|
+
call_event = event;
|
|
1534
|
+
}
|
|
1535
|
+
if (execCallback) {
|
|
1536
|
+
const result = listenerCallBack.call(call_this, call_event, call_$selector);
|
|
1537
|
+
checkOptionOnceToRemoveEventListener($elItem);
|
|
1538
|
+
if (typeof result === "boolean" && !result) {
|
|
1539
|
+
return false;
|
|
1540
|
+
}
|
|
1520
1541
|
}
|
|
1521
1542
|
};
|
|
1522
|
-
|
|
1543
|
+
// 遍历事件名设置元素事件
|
|
1523
1544
|
eventTypeList.forEach((eventName) => {
|
|
1524
|
-
|
|
1525
|
-
|
|
1526
|
-
|
|
1527
|
-
|
|
1545
|
+
// add listener
|
|
1546
|
+
$elItem.addEventListener(eventName, handlerCallBack, listenerOption);
|
|
1547
|
+
// 获取对象上的事件
|
|
1548
|
+
const elementEvents = Reflect.get($elItem, GlobalData.domEventSymbol) || {};
|
|
1549
|
+
// 初始化对象上的xx事件
|
|
1528
1550
|
elementEvents[eventName] = elementEvents[eventName] || [];
|
|
1529
1551
|
elementEvents[eventName].push({
|
|
1530
1552
|
selector: selectorList,
|
|
@@ -1532,8 +1554,8 @@ define((function () { 'use strict';
|
|
|
1532
1554
|
handlerCallBack: handlerCallBack,
|
|
1533
1555
|
callback: listenerCallBack,
|
|
1534
1556
|
});
|
|
1535
|
-
|
|
1536
|
-
Reflect.set(
|
|
1557
|
+
// 覆盖事件
|
|
1558
|
+
Reflect.set($elItem, GlobalData.domEventSymbol, elementEvents);
|
|
1537
1559
|
});
|
|
1538
1560
|
});
|
|
1539
1561
|
return {
|
|
@@ -1547,7 +1569,7 @@ define((function () { 'use strict';
|
|
|
1547
1569
|
/**
|
|
1548
1570
|
* 主动触发事件
|
|
1549
1571
|
* @param extraDetails 赋予触发的Event的额外属性,如果是Event类型,那么将自动代替默认new的Event对象
|
|
1550
|
-
* @param useDispatchToTriggerEvent 是否使用dispatchEvent来触发事件,默认true,如果为false,则直接调用callback
|
|
1572
|
+
* @param useDispatchToTriggerEvent 是否使用dispatchEvent来触发事件,默认true,如果为false,则直接调用callback,但是这种会让使用了`$selector`的没有值
|
|
1551
1573
|
*/
|
|
1552
1574
|
emit: (extraDetails, useDispatchToTriggerEvent) => {
|
|
1553
1575
|
that.emit($elList, eventTypeList, extraDetails, useDispatchToTriggerEvent);
|
|
@@ -1561,7 +1583,7 @@ define((function () { 'use strict';
|
|
|
1561
1583
|
* @param startIndex
|
|
1562
1584
|
* @param option
|
|
1563
1585
|
*/
|
|
1564
|
-
function
|
|
1586
|
+
const getOption = function (args1, startIndex, option) {
|
|
1565
1587
|
const currentParam = args1[startIndex];
|
|
1566
1588
|
if (typeof currentParam === "boolean") {
|
|
1567
1589
|
option.capture = currentParam;
|
|
@@ -1570,7 +1592,7 @@ define((function () { 'use strict';
|
|
|
1570
1592
|
option.capture = currentParam.capture;
|
|
1571
1593
|
}
|
|
1572
1594
|
return option;
|
|
1573
|
-
}
|
|
1595
|
+
};
|
|
1574
1596
|
const that = this;
|
|
1575
1597
|
// eslint-disable-next-line prefer-rest-params
|
|
1576
1598
|
const args = arguments;
|
|
@@ -1628,7 +1650,7 @@ define((function () { 'use strict';
|
|
|
1628
1650
|
filter = option;
|
|
1629
1651
|
}
|
|
1630
1652
|
$elList.forEach(($elItem) => {
|
|
1631
|
-
|
|
1653
|
+
// 获取对象上的事件
|
|
1632
1654
|
const elementEvents = Reflect.get($elItem, GlobalData.domEventSymbol) || {};
|
|
1633
1655
|
eventTypeList.forEach((eventName) => {
|
|
1634
1656
|
const handlers = elementEvents[eventName] || [];
|
|
@@ -1661,7 +1683,7 @@ define((function () { 'use strict';
|
|
|
1661
1683
|
}
|
|
1662
1684
|
}
|
|
1663
1685
|
if (handlers.length === 0) {
|
|
1664
|
-
|
|
1686
|
+
// 如果没有任意的handler,那么删除该属性
|
|
1665
1687
|
CommonUtils.delete(elementEvents, eventType);
|
|
1666
1688
|
}
|
|
1667
1689
|
});
|
|
@@ -2422,11 +2444,11 @@ define((function () { 'use strict';
|
|
|
2422
2444
|
* 阻止事件的默认行为发生,并阻止事件传播
|
|
2423
2445
|
*/
|
|
2424
2446
|
const stopEvent = (event, onlyStopPropagation) => {
|
|
2447
|
+
// 停止事件的传播,阻止它继续向更上层的元素冒泡,事件将不会再传播给其他的元素
|
|
2448
|
+
event?.stopPropagation();
|
|
2449
|
+
// 阻止事件传播,并且还能阻止元素上的其他事件处理程序被触发
|
|
2450
|
+
event?.stopImmediatePropagation();
|
|
2425
2451
|
if (typeof onlyStopPropagation === "boolean" && onlyStopPropagation) {
|
|
2426
|
-
// 停止事件的传播,阻止它继续向更上层的元素冒泡,事件将不会再传播给其他的元素
|
|
2427
|
-
event?.stopPropagation();
|
|
2428
|
-
// 阻止事件传播,并且还能阻止元素上的其他事件处理程序被触发
|
|
2429
|
-
event?.stopImmediatePropagation();
|
|
2430
2452
|
return;
|
|
2431
2453
|
}
|
|
2432
2454
|
// 阻止事件的默认行为发生。例如,当点击一个链接时,浏览器会默认打开链接的URL,或者在输入框内输入文字
|