@whitesev/domutils 1.9.4 → 1.9.6
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 +126 -61
- 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 +126 -61
- 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 +126 -61
- 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 +126 -61
- 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 +126 -61
- 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 +126 -61
- 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 +70 -18
- package/package.json +1 -1
- package/src/ElementEvent.ts +210 -80
- 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
|
/** 默认的配置 */
|
|
@@ -1932,7 +1932,8 @@ var DOMUtils = (function () {
|
|
|
1932
1932
|
that.emit(element, "click", details, useDispatchToEmit);
|
|
1933
1933
|
}
|
|
1934
1934
|
else {
|
|
1935
|
-
that.on(element, "click", null, handler);
|
|
1935
|
+
const listener = that.on(element, "click", null, handler);
|
|
1936
|
+
return listener;
|
|
1936
1937
|
}
|
|
1937
1938
|
}
|
|
1938
1939
|
/**
|
|
@@ -1968,7 +1969,8 @@ var DOMUtils = (function () {
|
|
|
1968
1969
|
that.emit(element, "blur", details, useDispatchToEmit);
|
|
1969
1970
|
}
|
|
1970
1971
|
else {
|
|
1971
|
-
that.on(element, "blur", null, handler);
|
|
1972
|
+
const listener = that.on(element, "blur", null, handler);
|
|
1973
|
+
return listener;
|
|
1972
1974
|
}
|
|
1973
1975
|
}
|
|
1974
1976
|
/**
|
|
@@ -2004,7 +2006,8 @@ var DOMUtils = (function () {
|
|
|
2004
2006
|
that.emit(element, "focus", details, useDispatchToEmit);
|
|
2005
2007
|
}
|
|
2006
2008
|
else {
|
|
2007
|
-
that.on(element, "focus", null, handler);
|
|
2009
|
+
const listener = that.on(element, "focus", null, handler);
|
|
2010
|
+
return listener;
|
|
2008
2011
|
}
|
|
2009
2012
|
}
|
|
2010
2013
|
/**
|
|
@@ -2031,13 +2034,30 @@ var DOMUtils = (function () {
|
|
|
2031
2034
|
}
|
|
2032
2035
|
if (CommonUtils.isNodeList(element)) {
|
|
2033
2036
|
// 设置
|
|
2037
|
+
const listenerList = [];
|
|
2034
2038
|
element.forEach(($ele) => {
|
|
2035
|
-
that.onHover($ele, handler, option);
|
|
2039
|
+
const listener = that.onHover($ele, handler, option);
|
|
2040
|
+
listenerList.push(listener);
|
|
2036
2041
|
});
|
|
2037
|
-
return
|
|
2042
|
+
return {
|
|
2043
|
+
off() {
|
|
2044
|
+
listenerList.forEach((listener) => {
|
|
2045
|
+
if (!listener) {
|
|
2046
|
+
return;
|
|
2047
|
+
}
|
|
2048
|
+
listener.off();
|
|
2049
|
+
});
|
|
2050
|
+
},
|
|
2051
|
+
};
|
|
2038
2052
|
}
|
|
2039
|
-
that.on(element, "mouseenter", null, handler, option);
|
|
2040
|
-
that.on(element, "mouseleave", null, handler, option);
|
|
2053
|
+
const mouseenter_listener = that.on(element, "mouseenter", null, handler, option);
|
|
2054
|
+
const mouseleave_listener = that.on(element, "mouseleave", null, handler, option);
|
|
2055
|
+
return {
|
|
2056
|
+
off() {
|
|
2057
|
+
mouseenter_listener.off();
|
|
2058
|
+
mouseleave_listener.off();
|
|
2059
|
+
},
|
|
2060
|
+
};
|
|
2041
2061
|
}
|
|
2042
2062
|
/**
|
|
2043
2063
|
* 监听动画结束
|
|
@@ -2120,12 +2140,23 @@ var DOMUtils = (function () {
|
|
|
2120
2140
|
}
|
|
2121
2141
|
if (CommonUtils.isNodeList(element)) {
|
|
2122
2142
|
// 设置
|
|
2143
|
+
const listenerList = [];
|
|
2123
2144
|
element.forEach(($ele) => {
|
|
2124
|
-
that.onKeyup($ele, handler, option);
|
|
2145
|
+
const listener = that.onKeyup($ele, handler, option);
|
|
2146
|
+
listenerList.push(listener);
|
|
2125
2147
|
});
|
|
2126
|
-
return
|
|
2148
|
+
return {
|
|
2149
|
+
off() {
|
|
2150
|
+
listenerList.forEach((listener) => {
|
|
2151
|
+
if (!listener) {
|
|
2152
|
+
return;
|
|
2153
|
+
}
|
|
2154
|
+
listener.off();
|
|
2155
|
+
});
|
|
2156
|
+
},
|
|
2157
|
+
};
|
|
2127
2158
|
}
|
|
2128
|
-
that.on(element, "keyup", null, handler, option);
|
|
2159
|
+
return that.on(element, "keyup", null, handler, option);
|
|
2129
2160
|
}
|
|
2130
2161
|
/**
|
|
2131
2162
|
* 当按键按下时触发事件
|
|
@@ -2152,12 +2183,23 @@ var DOMUtils = (function () {
|
|
|
2152
2183
|
}
|
|
2153
2184
|
if (CommonUtils.isNodeList(element)) {
|
|
2154
2185
|
// 设置
|
|
2186
|
+
const listenerList = [];
|
|
2155
2187
|
element.forEach(($ele) => {
|
|
2156
|
-
that.onKeydown($ele, handler, option);
|
|
2188
|
+
const listener = that.onKeydown($ele, handler, option);
|
|
2189
|
+
listenerList.push(listener);
|
|
2157
2190
|
});
|
|
2158
|
-
return
|
|
2191
|
+
return {
|
|
2192
|
+
off() {
|
|
2193
|
+
listenerList.forEach((listener) => {
|
|
2194
|
+
if (!listener) {
|
|
2195
|
+
return;
|
|
2196
|
+
}
|
|
2197
|
+
listener.off();
|
|
2198
|
+
});
|
|
2199
|
+
},
|
|
2200
|
+
};
|
|
2159
2201
|
}
|
|
2160
|
-
that.on(element, "keydown", null, handler, option);
|
|
2202
|
+
return that.on(element, "keydown", null, handler, option);
|
|
2161
2203
|
}
|
|
2162
2204
|
/**
|
|
2163
2205
|
* 当按键按下时触发事件
|
|
@@ -2184,12 +2226,23 @@ var DOMUtils = (function () {
|
|
|
2184
2226
|
}
|
|
2185
2227
|
if (CommonUtils.isNodeList(element)) {
|
|
2186
2228
|
// 设置
|
|
2229
|
+
const listenerList = [];
|
|
2187
2230
|
element.forEach(($ele) => {
|
|
2188
|
-
that.onKeypress($ele, handler, option);
|
|
2231
|
+
const listener = that.onKeypress($ele, handler, option);
|
|
2232
|
+
listenerList.push(listener);
|
|
2189
2233
|
});
|
|
2190
|
-
return
|
|
2234
|
+
return {
|
|
2235
|
+
off() {
|
|
2236
|
+
listenerList.forEach((listener) => {
|
|
2237
|
+
if (!listener) {
|
|
2238
|
+
return;
|
|
2239
|
+
}
|
|
2240
|
+
listener.off();
|
|
2241
|
+
});
|
|
2242
|
+
},
|
|
2243
|
+
};
|
|
2191
2244
|
}
|
|
2192
|
-
that.on(element, "keypress", null, handler, option);
|
|
2245
|
+
return that.on(element, "keypress", null, handler, option);
|
|
2193
2246
|
}
|
|
2194
2247
|
/**
|
|
2195
2248
|
* 监听某个元素键盘按键事件或window全局按键事件
|
|
@@ -2282,12 +2335,8 @@ var DOMUtils = (function () {
|
|
|
2282
2335
|
handler(keyName, keyValue, otherCodeList, event);
|
|
2283
2336
|
}
|
|
2284
2337
|
};
|
|
2285
|
-
that.on(element, eventName, keyboardEventCallBack, options);
|
|
2286
|
-
return
|
|
2287
|
-
removeListen: () => {
|
|
2288
|
-
that.off(element, eventName, keyboardEventCallBack, options);
|
|
2289
|
-
},
|
|
2290
|
-
};
|
|
2338
|
+
const listener = that.on(element, eventName, keyboardEventCallBack, options);
|
|
2339
|
+
return listener;
|
|
2291
2340
|
}
|
|
2292
2341
|
/**
|
|
2293
2342
|
* 监input、textarea的输入框值改变的事件(当输入法输入时,不会触发该监听)
|
|
@@ -2318,11 +2367,14 @@ var DOMUtils = (function () {
|
|
|
2318
2367
|
const compositionStartListener = this.on($el, "compositionstart", __composition_start_callback, option);
|
|
2319
2368
|
const compositionEndListener = this.on($el, "compositionend", __composition_end_callback, option);
|
|
2320
2369
|
return {
|
|
2321
|
-
off
|
|
2370
|
+
off() {
|
|
2322
2371
|
inputListener.off();
|
|
2323
2372
|
compositionStartListener.off();
|
|
2324
2373
|
compositionEndListener.off();
|
|
2325
2374
|
},
|
|
2375
|
+
emit(details, useDispatchToEmit) {
|
|
2376
|
+
inputListener.emit(details, useDispatchToEmit);
|
|
2377
|
+
},
|
|
2326
2378
|
};
|
|
2327
2379
|
}
|
|
2328
2380
|
onDoubleClick(...args) {
|
|
@@ -2356,41 +2408,26 @@ var DOMUtils = (function () {
|
|
|
2356
2408
|
else {
|
|
2357
2409
|
throw new Error("args length error");
|
|
2358
2410
|
}
|
|
2359
|
-
let
|
|
2411
|
+
let clickMap = new WeakMap();
|
|
2360
2412
|
let isDoubleClick = false;
|
|
2361
2413
|
let timer = void 0;
|
|
2362
|
-
/** 是否是移动端点击 */
|
|
2363
|
-
let isMobileTouch = false;
|
|
2364
2414
|
/** 检测是否是单击的延迟时间 */
|
|
2365
2415
|
const checkClickTime = 200;
|
|
2366
|
-
const dblclick_handler =
|
|
2367
|
-
if (evt.type === "dblclick" && isMobileTouch) {
|
|
2368
|
-
// 禁止在移动端触发dblclick事件
|
|
2369
|
-
return;
|
|
2370
|
-
}
|
|
2416
|
+
const dblclick_handler = (evt, option, $selector) => {
|
|
2371
2417
|
if ($selector) {
|
|
2372
|
-
|
|
2418
|
+
return handler(evt, $selector, option);
|
|
2373
2419
|
}
|
|
2374
2420
|
else {
|
|
2375
|
-
|
|
2421
|
+
return handler(evt, option);
|
|
2376
2422
|
}
|
|
2377
2423
|
};
|
|
2378
|
-
const dblClickListener = this.on($el, "dblclick", selector, (evt, $selector) => {
|
|
2379
|
-
this.preventEvent(evt);
|
|
2380
|
-
dblclick_handler(evt, {
|
|
2381
|
-
isDoubleClick: true,
|
|
2382
|
-
}, $selector);
|
|
2383
|
-
}, options);
|
|
2384
2424
|
const pointerUpListener = this.on($el, "pointerup", selector, (evt, $selector) => {
|
|
2385
|
-
this.preventEvent(evt);
|
|
2386
|
-
if (evt.pointerType === "touch") {
|
|
2387
|
-
isMobileTouch = true;
|
|
2388
|
-
}
|
|
2425
|
+
// this.preventEvent(evt);
|
|
2389
2426
|
clearTimeout(timer);
|
|
2390
2427
|
timer = void 0;
|
|
2391
|
-
if (isDoubleClick && $
|
|
2428
|
+
if (isDoubleClick && clickMap.has($selector)) {
|
|
2392
2429
|
isDoubleClick = false;
|
|
2393
|
-
$
|
|
2430
|
+
clickMap.delete($selector);
|
|
2394
2431
|
/* 判定为双击 */
|
|
2395
2432
|
dblclick_handler(evt, {
|
|
2396
2433
|
isDoubleClick: true,
|
|
@@ -2405,14 +2442,14 @@ var DOMUtils = (function () {
|
|
|
2405
2442
|
}, $selector);
|
|
2406
2443
|
}, checkClickTime);
|
|
2407
2444
|
isDoubleClick = true;
|
|
2408
|
-
$
|
|
2445
|
+
clickMap.set($selector, evt);
|
|
2409
2446
|
}
|
|
2410
2447
|
}, options);
|
|
2411
2448
|
return {
|
|
2412
2449
|
off() {
|
|
2413
|
-
$click = null;
|
|
2414
|
-
dblClickListener.off();
|
|
2415
2450
|
pointerUpListener.off();
|
|
2451
|
+
// @ts-expect-error
|
|
2452
|
+
clickMap = null;
|
|
2416
2453
|
},
|
|
2417
2454
|
};
|
|
2418
2455
|
}
|
|
@@ -2420,28 +2457,56 @@ var DOMUtils = (function () {
|
|
|
2420
2457
|
/**
|
|
2421
2458
|
* 阻止事件的默认行为发生,并阻止事件传播
|
|
2422
2459
|
*/
|
|
2423
|
-
const stopEvent = (event) => {
|
|
2424
|
-
|
|
2460
|
+
const stopEvent = (event, onlyStopPropagation) => {
|
|
2461
|
+
if (typeof onlyStopPropagation === "boolean" && onlyStopPropagation) {
|
|
2462
|
+
// 停止事件的传播,阻止它继续向更上层的元素冒泡,事件将不会再传播给其他的元素
|
|
2463
|
+
event?.stopPropagation();
|
|
2464
|
+
// 阻止事件传播,并且还能阻止元素上的其他事件处理程序被触发
|
|
2465
|
+
event?.stopImmediatePropagation();
|
|
2466
|
+
return;
|
|
2467
|
+
}
|
|
2468
|
+
// 阻止事件的默认行为发生。例如,当点击一个链接时,浏览器会默认打开链接的URL,或者在输入框内输入文字
|
|
2425
2469
|
event?.preventDefault();
|
|
2426
|
-
/* 停止事件的传播,阻止它继续向更上层的元素冒泡,事件将不会再传播给其他的元素 */
|
|
2427
|
-
event?.stopPropagation();
|
|
2428
|
-
/* 阻止事件传播,并且还能阻止元素上的其他事件处理程序被触发 */
|
|
2429
|
-
event?.stopImmediatePropagation();
|
|
2430
2470
|
return false;
|
|
2431
2471
|
};
|
|
2432
|
-
if (args
|
|
2433
|
-
|
|
2434
|
-
|
|
2472
|
+
if (args[0] instanceof Event) {
|
|
2473
|
+
// 直接阻止事件
|
|
2474
|
+
const onlyStopPropagation = args[1];
|
|
2475
|
+
return stopEvent(args[0], onlyStopPropagation);
|
|
2435
2476
|
}
|
|
2436
2477
|
else {
|
|
2437
2478
|
const $el = args[0];
|
|
2438
2479
|
let eventNameList = args[1];
|
|
2439
|
-
|
|
2440
|
-
|
|
2480
|
+
let selector = void 0;
|
|
2481
|
+
let capture = false;
|
|
2482
|
+
let onlyStopPropagation = false;
|
|
2483
|
+
// 添加对应的事件来阻止触发
|
|
2441
2484
|
if (typeof eventNameList === "string") {
|
|
2442
2485
|
eventNameList = [eventNameList];
|
|
2443
2486
|
}
|
|
2444
|
-
|
|
2487
|
+
let option = void 0;
|
|
2488
|
+
if (typeof args[2] === "string" || Array.isArray(args[2])) {
|
|
2489
|
+
// selector
|
|
2490
|
+
selector = args[2];
|
|
2491
|
+
if (typeof args[3] === "object" && args[3] != null) {
|
|
2492
|
+
option = args[3];
|
|
2493
|
+
}
|
|
2494
|
+
}
|
|
2495
|
+
else if (typeof args[2] === "object" && args[2] != null && !Array.isArray(args[2])) {
|
|
2496
|
+
// option
|
|
2497
|
+
option = args[2];
|
|
2498
|
+
}
|
|
2499
|
+
else {
|
|
2500
|
+
throw new TypeError("Invalid argument");
|
|
2501
|
+
}
|
|
2502
|
+
if (option) {
|
|
2503
|
+
capture = Boolean(option.capture);
|
|
2504
|
+
onlyStopPropagation = Boolean(option.onlyStopPropagation);
|
|
2505
|
+
}
|
|
2506
|
+
const listener = this.on($el, eventNameList, selector, (evt) => {
|
|
2507
|
+
return stopEvent(evt, onlyStopPropagation);
|
|
2508
|
+
}, { capture: capture });
|
|
2509
|
+
return listener;
|
|
2445
2510
|
}
|
|
2446
2511
|
}
|
|
2447
2512
|
}
|