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