@whitesev/domutils 1.9.5 → 1.9.7
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 +157 -58
- 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 +157 -58
- 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 +157 -58
- 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 +157 -58
- 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 +157 -58
- 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 +157 -58
- 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 +83 -28
- package/package.json +1 -1
- package/src/ElementEvent.ts +257 -74
- package/src/Utils.ts +0 -3
package/dist/index.iife.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
var DOMUtils = (function () {
|
|
2
2
|
'use strict';
|
|
3
3
|
|
|
4
|
-
const version = "1.9.
|
|
4
|
+
const version = "1.9.6";
|
|
5
5
|
|
|
6
6
|
class WindowApi {
|
|
7
7
|
/** 默认的配置 */
|
|
@@ -591,10 +591,7 @@ var DOMUtils = (function () {
|
|
|
591
591
|
"slideDown",
|
|
592
592
|
"slideToggle",
|
|
593
593
|
"slideUp",
|
|
594
|
-
"sort",
|
|
595
|
-
"splice",
|
|
596
594
|
"text",
|
|
597
|
-
"toArray",
|
|
598
595
|
"toggle",
|
|
599
596
|
"toggleClass",
|
|
600
597
|
"trigger",
|
|
@@ -1860,35 +1857,43 @@ var DOMUtils = (function () {
|
|
|
1860
1857
|
else {
|
|
1861
1858
|
$elList.push(element);
|
|
1862
1859
|
}
|
|
1860
|
+
/**
|
|
1861
|
+
* 主动添加属性
|
|
1862
|
+
*/
|
|
1863
|
+
const addExtraProp = (event, obj) => {
|
|
1864
|
+
if (event instanceof Event && typeof obj === "object" && obj != null && !Array.isArray(obj)) {
|
|
1865
|
+
const detailKeys = Object.keys(obj);
|
|
1866
|
+
detailKeys.forEach((keyName) => {
|
|
1867
|
+
const value = Reflect.get(obj, keyName);
|
|
1868
|
+
// 在event上添加属性
|
|
1869
|
+
Reflect.set(event, keyName, value);
|
|
1870
|
+
});
|
|
1871
|
+
}
|
|
1872
|
+
};
|
|
1863
1873
|
let eventTypeList = [];
|
|
1874
|
+
/**
|
|
1875
|
+
* 主动传递的事件
|
|
1876
|
+
*/
|
|
1877
|
+
let __event__ = null;
|
|
1864
1878
|
if (Array.isArray(eventType)) {
|
|
1865
1879
|
eventTypeList = eventType.filter((it) => typeof it === "string" && it.trim() !== "");
|
|
1866
1880
|
}
|
|
1867
1881
|
else if (typeof eventType === "string") {
|
|
1868
1882
|
eventTypeList = eventType.split(" ");
|
|
1869
1883
|
}
|
|
1884
|
+
else if (eventType instanceof Event) {
|
|
1885
|
+
__event__ = eventType;
|
|
1886
|
+
addExtraProp(__event__, extraDetails);
|
|
1887
|
+
}
|
|
1870
1888
|
$elList.forEach(($elItem) => {
|
|
1871
1889
|
/* 获取对象上的事件 */
|
|
1872
1890
|
const elementEvents = Reflect.get($elItem, GlobalData.domEventSymbol) || {};
|
|
1873
|
-
|
|
1874
|
-
|
|
1875
|
-
|
|
1876
|
-
|
|
1877
|
-
}
|
|
1878
|
-
else {
|
|
1879
|
-
// 构造事件
|
|
1880
|
-
event = new Event(eventTypeItem);
|
|
1881
|
-
if (typeof extraDetails === "object" && extraDetails != null) {
|
|
1882
|
-
const detailKeys = Object.keys(extraDetails);
|
|
1883
|
-
detailKeys.forEach((keyName) => {
|
|
1884
|
-
const value = Reflect.get(extraDetails, keyName);
|
|
1885
|
-
// 在event上添加属性
|
|
1886
|
-
Reflect.set(event, keyName, value);
|
|
1887
|
-
});
|
|
1888
|
-
}
|
|
1889
|
-
}
|
|
1891
|
+
/**
|
|
1892
|
+
* 触发事件
|
|
1893
|
+
*/
|
|
1894
|
+
const dispatchEvent = (event, eventTypeItem) => {
|
|
1890
1895
|
if (useDispatchToTriggerEvent == false && eventTypeItem in elementEvents) {
|
|
1891
|
-
//
|
|
1896
|
+
// 直接调用.on监听的事件
|
|
1892
1897
|
elementEvents[eventTypeItem].forEach((eventsItem) => {
|
|
1893
1898
|
eventsItem.handlerCallBack(event);
|
|
1894
1899
|
});
|
|
@@ -1896,7 +1901,21 @@ var DOMUtils = (function () {
|
|
|
1896
1901
|
else {
|
|
1897
1902
|
$elItem.dispatchEvent(event);
|
|
1898
1903
|
}
|
|
1899
|
-
}
|
|
1904
|
+
};
|
|
1905
|
+
if (__event__) {
|
|
1906
|
+
// 使用主动传递的事件直接触发
|
|
1907
|
+
const event = __event__;
|
|
1908
|
+
const eventTypeItem = event.type;
|
|
1909
|
+
dispatchEvent(event, eventTypeItem);
|
|
1910
|
+
}
|
|
1911
|
+
else {
|
|
1912
|
+
eventTypeList.forEach((eventTypeItem) => {
|
|
1913
|
+
// 构造事件
|
|
1914
|
+
const event = new Event(eventTypeItem);
|
|
1915
|
+
addExtraProp(event, extraDetails);
|
|
1916
|
+
dispatchEvent(event, eventTypeItem);
|
|
1917
|
+
});
|
|
1918
|
+
}
|
|
1900
1919
|
});
|
|
1901
1920
|
}
|
|
1902
1921
|
/**
|
|
@@ -1932,7 +1951,8 @@ var DOMUtils = (function () {
|
|
|
1932
1951
|
that.emit(element, "click", details, useDispatchToEmit);
|
|
1933
1952
|
}
|
|
1934
1953
|
else {
|
|
1935
|
-
that.on(element, "click", null, handler);
|
|
1954
|
+
const listener = that.on(element, "click", null, handler);
|
|
1955
|
+
return listener;
|
|
1936
1956
|
}
|
|
1937
1957
|
}
|
|
1938
1958
|
/**
|
|
@@ -1968,7 +1988,8 @@ var DOMUtils = (function () {
|
|
|
1968
1988
|
that.emit(element, "blur", details, useDispatchToEmit);
|
|
1969
1989
|
}
|
|
1970
1990
|
else {
|
|
1971
|
-
that.on(element, "blur", null, handler);
|
|
1991
|
+
const listener = that.on(element, "blur", null, handler);
|
|
1992
|
+
return listener;
|
|
1972
1993
|
}
|
|
1973
1994
|
}
|
|
1974
1995
|
/**
|
|
@@ -2004,7 +2025,8 @@ var DOMUtils = (function () {
|
|
|
2004
2025
|
that.emit(element, "focus", details, useDispatchToEmit);
|
|
2005
2026
|
}
|
|
2006
2027
|
else {
|
|
2007
|
-
that.on(element, "focus", null, handler);
|
|
2028
|
+
const listener = that.on(element, "focus", null, handler);
|
|
2029
|
+
return listener;
|
|
2008
2030
|
}
|
|
2009
2031
|
}
|
|
2010
2032
|
/**
|
|
@@ -2031,13 +2053,30 @@ var DOMUtils = (function () {
|
|
|
2031
2053
|
}
|
|
2032
2054
|
if (CommonUtils.isNodeList(element)) {
|
|
2033
2055
|
// 设置
|
|
2056
|
+
const listenerList = [];
|
|
2034
2057
|
element.forEach(($ele) => {
|
|
2035
|
-
that.onHover($ele, handler, option);
|
|
2058
|
+
const listener = that.onHover($ele, handler, option);
|
|
2059
|
+
listenerList.push(listener);
|
|
2036
2060
|
});
|
|
2037
|
-
return
|
|
2061
|
+
return {
|
|
2062
|
+
off() {
|
|
2063
|
+
listenerList.forEach((listener) => {
|
|
2064
|
+
if (!listener) {
|
|
2065
|
+
return;
|
|
2066
|
+
}
|
|
2067
|
+
listener.off();
|
|
2068
|
+
});
|
|
2069
|
+
},
|
|
2070
|
+
};
|
|
2038
2071
|
}
|
|
2039
|
-
that.on(element, "mouseenter", null, handler, option);
|
|
2040
|
-
that.on(element, "mouseleave", null, handler, option);
|
|
2072
|
+
const mouseenter_listener = that.on(element, "mouseenter", null, handler, option);
|
|
2073
|
+
const mouseleave_listener = that.on(element, "mouseleave", null, handler, option);
|
|
2074
|
+
return {
|
|
2075
|
+
off() {
|
|
2076
|
+
mouseenter_listener.off();
|
|
2077
|
+
mouseleave_listener.off();
|
|
2078
|
+
},
|
|
2079
|
+
};
|
|
2041
2080
|
}
|
|
2042
2081
|
/**
|
|
2043
2082
|
* 监听动画结束
|
|
@@ -2120,12 +2159,23 @@ var DOMUtils = (function () {
|
|
|
2120
2159
|
}
|
|
2121
2160
|
if (CommonUtils.isNodeList(element)) {
|
|
2122
2161
|
// 设置
|
|
2162
|
+
const listenerList = [];
|
|
2123
2163
|
element.forEach(($ele) => {
|
|
2124
|
-
that.onKeyup($ele, handler, option);
|
|
2164
|
+
const listener = that.onKeyup($ele, handler, option);
|
|
2165
|
+
listenerList.push(listener);
|
|
2125
2166
|
});
|
|
2126
|
-
return
|
|
2167
|
+
return {
|
|
2168
|
+
off() {
|
|
2169
|
+
listenerList.forEach((listener) => {
|
|
2170
|
+
if (!listener) {
|
|
2171
|
+
return;
|
|
2172
|
+
}
|
|
2173
|
+
listener.off();
|
|
2174
|
+
});
|
|
2175
|
+
},
|
|
2176
|
+
};
|
|
2127
2177
|
}
|
|
2128
|
-
that.on(element, "keyup", null, handler, option);
|
|
2178
|
+
return that.on(element, "keyup", null, handler, option);
|
|
2129
2179
|
}
|
|
2130
2180
|
/**
|
|
2131
2181
|
* 当按键按下时触发事件
|
|
@@ -2152,12 +2202,23 @@ var DOMUtils = (function () {
|
|
|
2152
2202
|
}
|
|
2153
2203
|
if (CommonUtils.isNodeList(element)) {
|
|
2154
2204
|
// 设置
|
|
2205
|
+
const listenerList = [];
|
|
2155
2206
|
element.forEach(($ele) => {
|
|
2156
|
-
that.onKeydown($ele, handler, option);
|
|
2207
|
+
const listener = that.onKeydown($ele, handler, option);
|
|
2208
|
+
listenerList.push(listener);
|
|
2157
2209
|
});
|
|
2158
|
-
return
|
|
2210
|
+
return {
|
|
2211
|
+
off() {
|
|
2212
|
+
listenerList.forEach((listener) => {
|
|
2213
|
+
if (!listener) {
|
|
2214
|
+
return;
|
|
2215
|
+
}
|
|
2216
|
+
listener.off();
|
|
2217
|
+
});
|
|
2218
|
+
},
|
|
2219
|
+
};
|
|
2159
2220
|
}
|
|
2160
|
-
that.on(element, "keydown", null, handler, option);
|
|
2221
|
+
return that.on(element, "keydown", null, handler, option);
|
|
2161
2222
|
}
|
|
2162
2223
|
/**
|
|
2163
2224
|
* 当按键按下时触发事件
|
|
@@ -2184,12 +2245,23 @@ var DOMUtils = (function () {
|
|
|
2184
2245
|
}
|
|
2185
2246
|
if (CommonUtils.isNodeList(element)) {
|
|
2186
2247
|
// 设置
|
|
2248
|
+
const listenerList = [];
|
|
2187
2249
|
element.forEach(($ele) => {
|
|
2188
|
-
that.onKeypress($ele, handler, option);
|
|
2250
|
+
const listener = that.onKeypress($ele, handler, option);
|
|
2251
|
+
listenerList.push(listener);
|
|
2189
2252
|
});
|
|
2190
|
-
return
|
|
2253
|
+
return {
|
|
2254
|
+
off() {
|
|
2255
|
+
listenerList.forEach((listener) => {
|
|
2256
|
+
if (!listener) {
|
|
2257
|
+
return;
|
|
2258
|
+
}
|
|
2259
|
+
listener.off();
|
|
2260
|
+
});
|
|
2261
|
+
},
|
|
2262
|
+
};
|
|
2191
2263
|
}
|
|
2192
|
-
that.on(element, "keypress", null, handler, option);
|
|
2264
|
+
return that.on(element, "keypress", null, handler, option);
|
|
2193
2265
|
}
|
|
2194
2266
|
/**
|
|
2195
2267
|
* 监听某个元素键盘按键事件或window全局按键事件
|
|
@@ -2282,12 +2354,8 @@ var DOMUtils = (function () {
|
|
|
2282
2354
|
handler(keyName, keyValue, otherCodeList, event);
|
|
2283
2355
|
}
|
|
2284
2356
|
};
|
|
2285
|
-
that.on(element, eventName, keyboardEventCallBack, options);
|
|
2286
|
-
return
|
|
2287
|
-
removeListen: () => {
|
|
2288
|
-
that.off(element, eventName, keyboardEventCallBack, options);
|
|
2289
|
-
},
|
|
2290
|
-
};
|
|
2357
|
+
const listener = that.on(element, eventName, keyboardEventCallBack, options);
|
|
2358
|
+
return listener;
|
|
2291
2359
|
}
|
|
2292
2360
|
/**
|
|
2293
2361
|
* 监input、textarea的输入框值改变的事件(当输入法输入时,不会触发该监听)
|
|
@@ -2318,11 +2386,14 @@ var DOMUtils = (function () {
|
|
|
2318
2386
|
const compositionStartListener = this.on($el, "compositionstart", __composition_start_callback, option);
|
|
2319
2387
|
const compositionEndListener = this.on($el, "compositionend", __composition_end_callback, option);
|
|
2320
2388
|
return {
|
|
2321
|
-
off
|
|
2389
|
+
off() {
|
|
2322
2390
|
inputListener.off();
|
|
2323
2391
|
compositionStartListener.off();
|
|
2324
2392
|
compositionEndListener.off();
|
|
2325
2393
|
},
|
|
2394
|
+
emit(details, useDispatchToEmit) {
|
|
2395
|
+
inputListener.emit(details, useDispatchToEmit);
|
|
2396
|
+
},
|
|
2326
2397
|
};
|
|
2327
2398
|
}
|
|
2328
2399
|
onDoubleClick(...args) {
|
|
@@ -2405,28 +2476,56 @@ var DOMUtils = (function () {
|
|
|
2405
2476
|
/**
|
|
2406
2477
|
* 阻止事件的默认行为发生,并阻止事件传播
|
|
2407
2478
|
*/
|
|
2408
|
-
const stopEvent = (event) => {
|
|
2409
|
-
|
|
2479
|
+
const stopEvent = (event, onlyStopPropagation) => {
|
|
2480
|
+
if (typeof onlyStopPropagation === "boolean" && onlyStopPropagation) {
|
|
2481
|
+
// 停止事件的传播,阻止它继续向更上层的元素冒泡,事件将不会再传播给其他的元素
|
|
2482
|
+
event?.stopPropagation();
|
|
2483
|
+
// 阻止事件传播,并且还能阻止元素上的其他事件处理程序被触发
|
|
2484
|
+
event?.stopImmediatePropagation();
|
|
2485
|
+
return;
|
|
2486
|
+
}
|
|
2487
|
+
// 阻止事件的默认行为发生。例如,当点击一个链接时,浏览器会默认打开链接的URL,或者在输入框内输入文字
|
|
2410
2488
|
event?.preventDefault();
|
|
2411
|
-
/* 停止事件的传播,阻止它继续向更上层的元素冒泡,事件将不会再传播给其他的元素 */
|
|
2412
|
-
event?.stopPropagation();
|
|
2413
|
-
/* 阻止事件传播,并且还能阻止元素上的其他事件处理程序被触发 */
|
|
2414
|
-
event?.stopImmediatePropagation();
|
|
2415
2489
|
return false;
|
|
2416
2490
|
};
|
|
2417
|
-
if (args
|
|
2418
|
-
|
|
2419
|
-
|
|
2491
|
+
if (args[0] instanceof Event) {
|
|
2492
|
+
// 直接阻止事件
|
|
2493
|
+
const onlyStopPropagation = args[1];
|
|
2494
|
+
return stopEvent(args[0], onlyStopPropagation);
|
|
2420
2495
|
}
|
|
2421
2496
|
else {
|
|
2422
2497
|
const $el = args[0];
|
|
2423
2498
|
let eventNameList = args[1];
|
|
2424
|
-
|
|
2425
|
-
|
|
2499
|
+
let selector = void 0;
|
|
2500
|
+
let capture = false;
|
|
2501
|
+
let onlyStopPropagation = false;
|
|
2502
|
+
// 添加对应的事件来阻止触发
|
|
2426
2503
|
if (typeof eventNameList === "string") {
|
|
2427
2504
|
eventNameList = [eventNameList];
|
|
2428
2505
|
}
|
|
2429
|
-
|
|
2506
|
+
let option = void 0;
|
|
2507
|
+
if (typeof args[2] === "string" || Array.isArray(args[2])) {
|
|
2508
|
+
// selector
|
|
2509
|
+
selector = args[2];
|
|
2510
|
+
if (typeof args[3] === "object" && args[3] != null) {
|
|
2511
|
+
option = args[3];
|
|
2512
|
+
}
|
|
2513
|
+
}
|
|
2514
|
+
else if (typeof args[2] === "object" && args[2] != null && !Array.isArray(args[2])) {
|
|
2515
|
+
// option
|
|
2516
|
+
option = args[2];
|
|
2517
|
+
}
|
|
2518
|
+
else {
|
|
2519
|
+
throw new TypeError("Invalid argument");
|
|
2520
|
+
}
|
|
2521
|
+
if (option) {
|
|
2522
|
+
capture = Boolean(option.capture);
|
|
2523
|
+
onlyStopPropagation = Boolean(option.onlyStopPropagation);
|
|
2524
|
+
}
|
|
2525
|
+
const listener = this.on($el, eventNameList, selector, (evt) => {
|
|
2526
|
+
return stopEvent(evt, onlyStopPropagation);
|
|
2527
|
+
}, { capture: capture });
|
|
2528
|
+
return listener;
|
|
2430
2529
|
}
|
|
2431
2530
|
}
|
|
2432
2531
|
}
|