@whitesev/domutils 1.7.4 → 1.8.0
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/README.md +4 -4
- package/dist/index.amd.js +249 -136
- 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 +249 -136
- 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 +249 -136
- 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 +249 -136
- 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 +249 -136
- 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 +249 -136
- 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/eslint.config.d.mts +2 -0
- package/dist/types/src/ElementEvent.d.ts +123 -105
- package/dist/types/src/types/DOMUtilsEvent.d.ts +2 -2
- package/package.json +10 -10
- package/src/ElementEvent.ts +270 -135
- package/src/Utils.ts +28 -26
- package/src/types/DOMUtilsEvent.d.ts +2 -2
package/dist/index.system.js
CHANGED
|
@@ -526,13 +526,7 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
526
526
|
},
|
|
527
527
|
};
|
|
528
528
|
|
|
529
|
-
const version = "1.
|
|
530
|
-
|
|
531
|
-
/* 数据 */
|
|
532
|
-
const GlobalData = {
|
|
533
|
-
/** .on添加在元素存储的事件 */
|
|
534
|
-
domEventSymbol: Symbol("events_" + (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)),
|
|
535
|
-
};
|
|
529
|
+
const version = "1.8.0";
|
|
536
530
|
|
|
537
531
|
class ElementSelector {
|
|
538
532
|
windowApi;
|
|
@@ -904,35 +898,41 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
904
898
|
if (target == null) {
|
|
905
899
|
target = {};
|
|
906
900
|
}
|
|
901
|
+
// 当前遍历的目标对象
|
|
902
|
+
let iteratorTarget;
|
|
907
903
|
if (isAdd) {
|
|
908
|
-
|
|
909
|
-
|
|
910
|
-
const targetValue = Reflect.get(target, targetKeyName);
|
|
911
|
-
const sourceValue = Reflect.get(source, sourceKeyName);
|
|
912
|
-
if (typeof sourceValue === "object" && sourceValue != null && sourceKeyName in target && !isDOM(sourceValue)) {
|
|
913
|
-
/* 源端的值是object类型,且不是元素节点 */
|
|
914
|
-
Reflect.set(target, sourceKeyName, UtilsContext.assign(targetValue, sourceValue, isAdd));
|
|
915
|
-
continue;
|
|
916
|
-
}
|
|
917
|
-
Reflect.set(target, sourceKeyName, sourceValue);
|
|
918
|
-
}
|
|
904
|
+
// 追加并覆盖是以source为准
|
|
905
|
+
iteratorTarget = source;
|
|
919
906
|
}
|
|
920
907
|
else {
|
|
921
|
-
|
|
922
|
-
|
|
923
|
-
|
|
924
|
-
|
|
925
|
-
|
|
926
|
-
|
|
927
|
-
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
|
|
908
|
+
// 覆盖以target为准
|
|
909
|
+
iteratorTarget = target;
|
|
910
|
+
}
|
|
911
|
+
for (const keyName in iteratorTarget) {
|
|
912
|
+
if (!isAdd && !(keyName in source)) {
|
|
913
|
+
// 仅替换 但是源端没有此键
|
|
914
|
+
continue;
|
|
915
|
+
}
|
|
916
|
+
const targetValue = Reflect.get(target, keyName);
|
|
917
|
+
const sourceValue = Reflect.get(source, keyName);
|
|
918
|
+
if (typeof sourceValue === "object" && sourceValue != null && keyName in target && !isDOM(sourceValue)) {
|
|
919
|
+
// 源端的值是object类型,且不是元素节点
|
|
920
|
+
// 如果是数组,那此数组中有值,清空旧的数组再赋值
|
|
921
|
+
let childObjectValue;
|
|
922
|
+
if (Array.isArray(sourceValue)) {
|
|
923
|
+
if (Array.isArray(targetValue)) {
|
|
924
|
+
targetValue.length = 0;
|
|
932
925
|
}
|
|
933
|
-
|
|
934
|
-
|
|
926
|
+
childObjectValue = sourceValue;
|
|
927
|
+
}
|
|
928
|
+
else {
|
|
929
|
+
childObjectValue = UtilsContext.assign(targetValue, sourceValue, isAdd);
|
|
935
930
|
}
|
|
931
|
+
Reflect.set(target, keyName, childObjectValue);
|
|
932
|
+
}
|
|
933
|
+
else {
|
|
934
|
+
/* 直接赋值 */
|
|
935
|
+
Reflect.set(target, keyName, sourceValue);
|
|
936
936
|
}
|
|
937
937
|
}
|
|
938
938
|
return target;
|
|
@@ -1619,6 +1619,12 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
1619
1619
|
}
|
|
1620
1620
|
new ElementAnimate();
|
|
1621
1621
|
|
|
1622
|
+
/* 数据 */
|
|
1623
|
+
const GlobalData = {
|
|
1624
|
+
/** .on添加在元素存储的事件 */
|
|
1625
|
+
domEventSymbol: Symbol("events_" + (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)),
|
|
1626
|
+
};
|
|
1627
|
+
|
|
1622
1628
|
const OriginPrototype = {
|
|
1623
1629
|
Object: {
|
|
1624
1630
|
defineProperty: Object.defineProperty,
|
|
@@ -1678,7 +1684,7 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
1678
1684
|
if (element == null) {
|
|
1679
1685
|
return {
|
|
1680
1686
|
off() { },
|
|
1681
|
-
|
|
1687
|
+
emit() { },
|
|
1682
1688
|
};
|
|
1683
1689
|
}
|
|
1684
1690
|
let $elList = [];
|
|
@@ -1813,10 +1819,10 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
1813
1819
|
/**
|
|
1814
1820
|
* 主动触发事件
|
|
1815
1821
|
* @param details 赋予触发的Event的额外属性,如果是Event类型,那么将自动代替默认new的Event对象
|
|
1816
|
-
* @param
|
|
1822
|
+
* @param useDispatchToEmit 是否使用dispatchEvent来触发事件,默认true,如果为false,则直接调用callback,但是这种会让使用了selectorTarget的没有值
|
|
1817
1823
|
*/
|
|
1818
|
-
|
|
1819
|
-
that.
|
|
1824
|
+
emit: (details, useDispatchToEmit) => {
|
|
1825
|
+
that.emit($elList, eventTypeList, details, useDispatchToEmit);
|
|
1820
1826
|
},
|
|
1821
1827
|
};
|
|
1822
1828
|
}
|
|
@@ -1995,7 +2001,7 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
1995
2001
|
});
|
|
1996
2002
|
});
|
|
1997
2003
|
}
|
|
1998
|
-
|
|
2004
|
+
onReady(...args) {
|
|
1999
2005
|
const callback = args[0];
|
|
2000
2006
|
// 异步回调
|
|
2001
2007
|
let resolve = void 0;
|
|
@@ -2089,16 +2095,16 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
2089
2095
|
* @param element 需要触发的元素|元素数组|window
|
|
2090
2096
|
* @param eventType 需要触发的事件
|
|
2091
2097
|
* @param details 赋予触发的Event的额外属性,如果是Event类型,那么将自动代替默认new的Event对象
|
|
2092
|
-
* @param
|
|
2098
|
+
* @param useDispatchToEmit 是否使用dispatchEvent来触发事件,默认true,如果为false,则直接调用callback,但是这种会让使用了selectorTarget的没有值
|
|
2093
2099
|
* @example
|
|
2094
2100
|
* // 触发元素a.xx的click事件
|
|
2095
|
-
* DOMUtils.
|
|
2096
|
-
* DOMUtils.
|
|
2101
|
+
* DOMUtils.emit(document.querySelector("a.xx"),"click")
|
|
2102
|
+
* DOMUtils.emit("a.xx","click")
|
|
2097
2103
|
* // 触发元素a.xx的click、tap、hover事件
|
|
2098
|
-
* DOMUtils.
|
|
2099
|
-
* DOMUtils.
|
|
2104
|
+
* DOMUtils.emit(document.querySelector("a.xx"),"click tap hover")
|
|
2105
|
+
* DOMUtils.emit("a.xx",["click","tap","hover"])
|
|
2100
2106
|
*/
|
|
2101
|
-
|
|
2107
|
+
emit(element, eventType, details, useDispatchToEmit = true) {
|
|
2102
2108
|
const that = this;
|
|
2103
2109
|
if (typeof element === "string") {
|
|
2104
2110
|
element = that.selectorAll(element);
|
|
@@ -2140,7 +2146,7 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
2140
2146
|
});
|
|
2141
2147
|
}
|
|
2142
2148
|
}
|
|
2143
|
-
if (
|
|
2149
|
+
if (useDispatchToEmit == false && eventTypeItem in elementEvents) {
|
|
2144
2150
|
// 直接调用监听的事件
|
|
2145
2151
|
elementEvents[eventTypeItem].forEach((eventsItem) => {
|
|
2146
2152
|
eventsItem.callback(event);
|
|
@@ -2153,11 +2159,11 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
2153
2159
|
});
|
|
2154
2160
|
}
|
|
2155
2161
|
/**
|
|
2156
|
-
*
|
|
2162
|
+
* 监听或触发元素的click事件
|
|
2157
2163
|
* @param element 目标元素
|
|
2158
2164
|
* @param handler (可选)事件处理函数
|
|
2159
2165
|
* @param details (可选)赋予触发的Event的额外属性
|
|
2160
|
-
* @param
|
|
2166
|
+
* @param useDispatchToEmit (可选)是否使用dispatchEvent来触发事件,默认true
|
|
2161
2167
|
* @example
|
|
2162
2168
|
* // 触发元素a.xx的click事件
|
|
2163
2169
|
* DOMUtils.click(document.querySelector("a.xx"))
|
|
@@ -2166,7 +2172,7 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
2166
2172
|
* console.log("触发click事件成功")
|
|
2167
2173
|
* })
|
|
2168
2174
|
* */
|
|
2169
|
-
click(element, handler, details,
|
|
2175
|
+
click(element, handler, details, useDispatchToEmit) {
|
|
2170
2176
|
const that = this;
|
|
2171
2177
|
if (typeof element === "string") {
|
|
2172
2178
|
element = that.selectorAll(element);
|
|
@@ -2177,23 +2183,23 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
2177
2183
|
if (CommonUtils.isNodeList(element)) {
|
|
2178
2184
|
// 设置
|
|
2179
2185
|
element.forEach(($ele) => {
|
|
2180
|
-
that.click($ele, handler, details,
|
|
2186
|
+
that.click($ele, handler, details, useDispatchToEmit);
|
|
2181
2187
|
});
|
|
2182
2188
|
return;
|
|
2183
2189
|
}
|
|
2184
2190
|
if (handler == null) {
|
|
2185
|
-
that.
|
|
2191
|
+
that.emit(element, "click", details, useDispatchToEmit);
|
|
2186
2192
|
}
|
|
2187
2193
|
else {
|
|
2188
2194
|
that.on(element, "click", null, handler);
|
|
2189
2195
|
}
|
|
2190
2196
|
}
|
|
2191
2197
|
/**
|
|
2192
|
-
*
|
|
2198
|
+
* 监听或触发元素的blur事件
|
|
2193
2199
|
* @param element 目标元素
|
|
2194
2200
|
* @param handler (可选)事件处理函数
|
|
2195
2201
|
* @param details (可选)赋予触发的Event的额外属性
|
|
2196
|
-
* @param
|
|
2202
|
+
* @param useDispatchToEmit (可选)是否使用dispatchEvent来触发事件,默认true
|
|
2197
2203
|
* @example
|
|
2198
2204
|
* // 触发元素a.xx的blur事件
|
|
2199
2205
|
* DOMUtils.blur(document.querySelector("a.xx"))
|
|
@@ -2202,7 +2208,7 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
2202
2208
|
* console.log("触发blur事件成功")
|
|
2203
2209
|
* })
|
|
2204
2210
|
* */
|
|
2205
|
-
blur(element, handler, details,
|
|
2211
|
+
blur(element, handler, details, useDispatchToEmit) {
|
|
2206
2212
|
const that = this;
|
|
2207
2213
|
if (typeof element === "string") {
|
|
2208
2214
|
element = that.selectorAll(element);
|
|
@@ -2213,23 +2219,23 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
2213
2219
|
if (CommonUtils.isNodeList(element)) {
|
|
2214
2220
|
// 设置
|
|
2215
2221
|
element.forEach(($ele) => {
|
|
2216
|
-
that.focus($ele, handler, details,
|
|
2222
|
+
that.focus($ele, handler, details, useDispatchToEmit);
|
|
2217
2223
|
});
|
|
2218
2224
|
return;
|
|
2219
2225
|
}
|
|
2220
2226
|
if (handler === null) {
|
|
2221
|
-
that.
|
|
2227
|
+
that.emit(element, "blur", details, useDispatchToEmit);
|
|
2222
2228
|
}
|
|
2223
2229
|
else {
|
|
2224
2230
|
that.on(element, "blur", null, handler);
|
|
2225
2231
|
}
|
|
2226
2232
|
}
|
|
2227
2233
|
/**
|
|
2228
|
-
*
|
|
2234
|
+
* 监听或触发元素的focus事件
|
|
2229
2235
|
* @param element 目标元素
|
|
2230
2236
|
* @param handler (可选)事件处理函数
|
|
2231
2237
|
* @param details (可选)赋予触发的Event的额外属性
|
|
2232
|
-
* @param
|
|
2238
|
+
* @param useDispatchToEmit (可选)是否使用dispatchEvent来触发事件,默认true
|
|
2233
2239
|
* @example
|
|
2234
2240
|
* // 触发元素a.xx的focus事件
|
|
2235
2241
|
* DOMUtils.focus(document.querySelector("a.xx"))
|
|
@@ -2238,7 +2244,7 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
2238
2244
|
* console.log("触发focus事件成功")
|
|
2239
2245
|
* })
|
|
2240
2246
|
* */
|
|
2241
|
-
focus(element, handler, details,
|
|
2247
|
+
focus(element, handler, details, useDispatchToEmit) {
|
|
2242
2248
|
const that = this;
|
|
2243
2249
|
if (typeof element === "string") {
|
|
2244
2250
|
element = that.selectorAll(element);
|
|
@@ -2249,12 +2255,12 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
2249
2255
|
if (CommonUtils.isNodeList(element)) {
|
|
2250
2256
|
// 设置
|
|
2251
2257
|
element.forEach(($ele) => {
|
|
2252
|
-
that.focus($ele, handler, details,
|
|
2258
|
+
that.focus($ele, handler, details, useDispatchToEmit);
|
|
2253
2259
|
});
|
|
2254
2260
|
return;
|
|
2255
2261
|
}
|
|
2256
2262
|
if (handler == null) {
|
|
2257
|
-
that.
|
|
2263
|
+
that.emit(element, "focus", details, useDispatchToEmit);
|
|
2258
2264
|
}
|
|
2259
2265
|
else {
|
|
2260
2266
|
that.on(element, "focus", null, handler);
|
|
@@ -2267,14 +2273,14 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
2267
2273
|
* @param option 配置
|
|
2268
2274
|
* @example
|
|
2269
2275
|
* // 监听a.xx元素的移入或移出
|
|
2270
|
-
* DOMUtils.
|
|
2276
|
+
* DOMUtils.onHover(document.querySelector("a.xx"),()=>{
|
|
2271
2277
|
* console.log("移入/移除");
|
|
2272
2278
|
* })
|
|
2273
|
-
* DOMUtils.
|
|
2279
|
+
* DOMUtils.onHover("a.xx",()=>{
|
|
2274
2280
|
* console.log("移入/移除");
|
|
2275
2281
|
* })
|
|
2276
2282
|
*/
|
|
2277
|
-
|
|
2283
|
+
onHover(element, handler, option) {
|
|
2278
2284
|
const that = this;
|
|
2279
2285
|
if (typeof element === "string") {
|
|
2280
2286
|
element = that.selectorAll(element);
|
|
@@ -2285,7 +2291,7 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
2285
2291
|
if (CommonUtils.isNodeList(element)) {
|
|
2286
2292
|
// 设置
|
|
2287
2293
|
element.forEach(($ele) => {
|
|
2288
|
-
that.
|
|
2294
|
+
that.onHover($ele, handler, option);
|
|
2289
2295
|
});
|
|
2290
2296
|
return;
|
|
2291
2297
|
}
|
|
@@ -2293,12 +2299,12 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
2293
2299
|
that.on(element, "mouseleave", null, handler, option);
|
|
2294
2300
|
}
|
|
2295
2301
|
/**
|
|
2296
|
-
*
|
|
2302
|
+
* 监听动画结束
|
|
2297
2303
|
* @param element 监听的元素
|
|
2298
2304
|
* @param handler 触发的回调函数
|
|
2299
2305
|
* @param option 配置项,这里默认配置once为true
|
|
2300
2306
|
*/
|
|
2301
|
-
|
|
2307
|
+
onAnimationend(element, handler, option) {
|
|
2302
2308
|
const that = this;
|
|
2303
2309
|
if (typeof element === "string") {
|
|
2304
2310
|
element = that.selector(element);
|
|
@@ -2321,12 +2327,12 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
2321
2327
|
}
|
|
2322
2328
|
}
|
|
2323
2329
|
/**
|
|
2324
|
-
*
|
|
2330
|
+
* 监听过渡结束
|
|
2325
2331
|
* @param element 监听的元素
|
|
2326
2332
|
* @param handler 触发的回调函数
|
|
2327
2333
|
* @param option 配置项,这里默认配置once为true
|
|
2328
2334
|
*/
|
|
2329
|
-
|
|
2335
|
+
onTransitionend(element, handler, option) {
|
|
2330
2336
|
const that = this;
|
|
2331
2337
|
if (typeof element === "string") {
|
|
2332
2338
|
element = that.selector(element);
|
|
@@ -2363,7 +2369,7 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
2363
2369
|
* console.log("按键松开");
|
|
2364
2370
|
* })
|
|
2365
2371
|
*/
|
|
2366
|
-
|
|
2372
|
+
onKeyup(element, handler, option) {
|
|
2367
2373
|
const that = this;
|
|
2368
2374
|
if (element == null) {
|
|
2369
2375
|
return;
|
|
@@ -2374,7 +2380,7 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
2374
2380
|
if (CommonUtils.isNodeList(element)) {
|
|
2375
2381
|
// 设置
|
|
2376
2382
|
element.forEach(($ele) => {
|
|
2377
|
-
that.
|
|
2383
|
+
that.onKeyup($ele, handler, option);
|
|
2378
2384
|
});
|
|
2379
2385
|
return;
|
|
2380
2386
|
}
|
|
@@ -2395,7 +2401,7 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
2395
2401
|
* console.log("按键按下");
|
|
2396
2402
|
* })
|
|
2397
2403
|
*/
|
|
2398
|
-
|
|
2404
|
+
onKeydown(element, handler, option) {
|
|
2399
2405
|
const that = this;
|
|
2400
2406
|
if (element == null) {
|
|
2401
2407
|
return;
|
|
@@ -2406,7 +2412,7 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
2406
2412
|
if (CommonUtils.isNodeList(element)) {
|
|
2407
2413
|
// 设置
|
|
2408
2414
|
element.forEach(($ele) => {
|
|
2409
|
-
that.
|
|
2415
|
+
that.onKeydown($ele, handler, option);
|
|
2410
2416
|
});
|
|
2411
2417
|
return;
|
|
2412
2418
|
}
|
|
@@ -2427,7 +2433,7 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
2427
2433
|
* console.log("按键按下");
|
|
2428
2434
|
* })
|
|
2429
2435
|
*/
|
|
2430
|
-
|
|
2436
|
+
onKeypress(element, handler, option) {
|
|
2431
2437
|
const that = this;
|
|
2432
2438
|
if (element == null) {
|
|
2433
2439
|
return;
|
|
@@ -2438,76 +2444,76 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
2438
2444
|
if (CommonUtils.isNodeList(element)) {
|
|
2439
2445
|
// 设置
|
|
2440
2446
|
element.forEach(($ele) => {
|
|
2441
|
-
that.
|
|
2447
|
+
that.onKeypress($ele, handler, option);
|
|
2442
2448
|
});
|
|
2443
2449
|
return;
|
|
2444
2450
|
}
|
|
2445
2451
|
that.on(element, "keypress", null, handler, option);
|
|
2446
2452
|
}
|
|
2447
2453
|
/**
|
|
2448
|
-
|
|
2449
|
-
|
|
2450
|
-
|
|
2451
|
-
|
|
2452
|
-
|
|
2454
|
+
* 监听某个元素键盘按键事件或window全局按键事件
|
|
2455
|
+
* 按下有值的键时触发,按下Ctrl\Alt\Shift\Meta是无值键。按下先触发keydown事件,再触发keypress事件。
|
|
2456
|
+
* @param element 需要监听的对象,可以是全局Window或者某个元素
|
|
2457
|
+
* @param eventName 事件名,默认keypress,keydown - > keypress - > keyup
|
|
2458
|
+
* @param handler 自己定义的回调事件,参数1为当前的key,参数2为组合按键,数组类型,包含ctrl、shift、alt和meta(win键或mac的cmd键)
|
|
2453
2459
|
* @param options 监听事件的配置
|
|
2454
|
-
|
|
2455
|
-
|
|
2456
|
-
|
|
2457
|
-
|
|
2458
|
-
|
|
2459
|
-
|
|
2460
|
-
|
|
2461
|
-
|
|
2462
|
-
|
|
2463
|
-
|
|
2464
|
-
|
|
2465
|
-
|
|
2466
|
-
|
|
2467
|
-
|
|
2468
|
-
|
|
2469
|
-
|
|
2470
|
-
|
|
2471
|
-
|
|
2472
|
-
|
|
2473
|
-
|
|
2474
|
-
|
|
2475
|
-
|
|
2476
|
-
|
|
2477
|
-
|
|
2478
|
-
|
|
2479
|
-
|
|
2480
|
-
|
|
2481
|
-
|
|
2482
|
-
|
|
2483
|
-
|
|
2484
|
-
|
|
2485
|
-
|
|
2486
|
-
|
|
2487
|
-
|
|
2488
|
-
|
|
2489
|
-
|
|
2490
|
-
|
|
2491
|
-
|
|
2492
|
-
|
|
2493
|
-
|
|
2494
|
-
|
|
2495
|
-
|
|
2496
|
-
|
|
2497
|
-
|
|
2498
|
-
|
|
2499
|
-
|
|
2500
|
-
|
|
2501
|
-
|
|
2502
|
-
|
|
2503
|
-
|
|
2504
|
-
|
|
2505
|
-
|
|
2506
|
-
|
|
2507
|
-
|
|
2508
|
-
|
|
2509
|
-
|
|
2510
|
-
|
|
2460
|
+
* @example
|
|
2461
|
+
Utils.onKeyboard(window,(keyName,keyValue,otherKey,event)=>{
|
|
2462
|
+
if(keyName === "Enter"){
|
|
2463
|
+
console.log("回车按键的值是:"+keyValue)
|
|
2464
|
+
}
|
|
2465
|
+
if(otherKey.indexOf("ctrl") && keyName === "Enter" ){
|
|
2466
|
+
console.log("Ctrl和回车键");
|
|
2467
|
+
}
|
|
2468
|
+
})
|
|
2469
|
+
* @example
|
|
2470
|
+
字母和数字键的键码值(keyCode)
|
|
2471
|
+
按键 键码 按键 键码 按键 键码 按键 键码
|
|
2472
|
+
A 65 J 74 S 83 1 49
|
|
2473
|
+
B 66 K 75 T 84 2 50
|
|
2474
|
+
C 67 L 76 U 85 3 51
|
|
2475
|
+
D 68 M 77 V 86 4 52
|
|
2476
|
+
E 69 N 78 W 87 5 53
|
|
2477
|
+
F 70 O 79 X 88 6 54
|
|
2478
|
+
G 71 P 80 Y 89 7 55
|
|
2479
|
+
H 72 Q 81 Z 90 8 56
|
|
2480
|
+
I 73 R 82 0 48 9 57
|
|
2481
|
+
|
|
2482
|
+
数字键盘上的键的键码值(keyCode)
|
|
2483
|
+
功能键键码值(keyCode)
|
|
2484
|
+
按键 键码 按键 键码 按键 键码 按键 键码
|
|
2485
|
+
0 96 8 104 F1 112 F7 118
|
|
2486
|
+
1 97 9 105 F2 113 F8 119
|
|
2487
|
+
2 98 * 106 F3 114 F9 120
|
|
2488
|
+
3 99 + 107 F4 115 F10 121
|
|
2489
|
+
4 100 Enter 108 F5 116 F11 122
|
|
2490
|
+
5 101 - 109 F6 117 F12 123
|
|
2491
|
+
6 102 . 110
|
|
2492
|
+
7 103 / 111
|
|
2493
|
+
|
|
2494
|
+
控制键键码值(keyCode)
|
|
2495
|
+
按键 键码 按键 键码 按键 键码 按键 键码
|
|
2496
|
+
BackSpace 8 Esc 27 → 39 -_ 189
|
|
2497
|
+
Tab 9 Spacebar 32 ↓ 40 .> 190
|
|
2498
|
+
Clear 12 Page Up 33 Insert 45 /? 191
|
|
2499
|
+
Enter 13 Page Down 34 Delete 46 `~ 192
|
|
2500
|
+
Shift 16 End 35 Num Lock 144 [{ 219
|
|
2501
|
+
Control 17 Home 36 ;: 186 \| 220
|
|
2502
|
+
Alt 18 ← 37 =+ 187 ]} 221
|
|
2503
|
+
Cape Lock 20 ↑ 38 ,< 188 '" 222
|
|
2504
|
+
|
|
2505
|
+
多媒体键码值(keyCode)
|
|
2506
|
+
按键 键码
|
|
2507
|
+
音量加 175
|
|
2508
|
+
音量减 174
|
|
2509
|
+
停止 179
|
|
2510
|
+
静音 173
|
|
2511
|
+
浏览器 172
|
|
2512
|
+
邮件 180
|
|
2513
|
+
搜索 170
|
|
2514
|
+
收藏 171
|
|
2515
|
+
**/
|
|
2516
|
+
onKeyboard(element, eventName = "keypress", handler, options) {
|
|
2511
2517
|
const that = this;
|
|
2512
2518
|
if (typeof element === "string") {
|
|
2513
2519
|
element = that.selectorAll(element);
|
|
@@ -2531,8 +2537,8 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
2531
2537
|
if (event.shiftKey) {
|
|
2532
2538
|
otherCodeList.push("shift");
|
|
2533
2539
|
}
|
|
2534
|
-
if (typeof
|
|
2535
|
-
|
|
2540
|
+
if (typeof handler === "function") {
|
|
2541
|
+
handler(keyName, keyValue, otherCodeList, event);
|
|
2536
2542
|
}
|
|
2537
2543
|
};
|
|
2538
2544
|
that.on(element, eventName, keyboardEventCallBack, options);
|
|
@@ -2542,6 +2548,113 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
2542
2548
|
},
|
|
2543
2549
|
};
|
|
2544
2550
|
}
|
|
2551
|
+
/**
|
|
2552
|
+
* 监input、textarea的输入框值改变的事件(当输入法输入时,不会触发该监听)
|
|
2553
|
+
* @param $el 输入框元素
|
|
2554
|
+
* @param handler 回调函数
|
|
2555
|
+
* @param option 配置
|
|
2556
|
+
*/
|
|
2557
|
+
onInput($el, handler, option) {
|
|
2558
|
+
/**
|
|
2559
|
+
* 是否正在输入中
|
|
2560
|
+
*/
|
|
2561
|
+
let isComposite = false;
|
|
2562
|
+
const __callback = async (event) => {
|
|
2563
|
+
if (isComposite)
|
|
2564
|
+
return;
|
|
2565
|
+
await handler(event);
|
|
2566
|
+
};
|
|
2567
|
+
const __composition_start_callback = () => {
|
|
2568
|
+
isComposite = true;
|
|
2569
|
+
};
|
|
2570
|
+
const __composition_end_callback = () => {
|
|
2571
|
+
isComposite = false;
|
|
2572
|
+
this.emit($el, "input", {
|
|
2573
|
+
isComposite,
|
|
2574
|
+
});
|
|
2575
|
+
};
|
|
2576
|
+
const inputListener = this.on($el, "input", __callback, option);
|
|
2577
|
+
const compositionStartListener = this.on($el, "compositionstart", __composition_start_callback, option);
|
|
2578
|
+
const compositionEndListener = this.on($el, "compositionend", __composition_end_callback, option);
|
|
2579
|
+
return {
|
|
2580
|
+
off: () => {
|
|
2581
|
+
inputListener.off();
|
|
2582
|
+
compositionStartListener.off();
|
|
2583
|
+
compositionEndListener.off();
|
|
2584
|
+
},
|
|
2585
|
+
};
|
|
2586
|
+
}
|
|
2587
|
+
onDoubleClick(...args) {
|
|
2588
|
+
const $el = args[0];
|
|
2589
|
+
let selector = void 0;
|
|
2590
|
+
let handler;
|
|
2591
|
+
let options;
|
|
2592
|
+
if (args.length === 2) {
|
|
2593
|
+
if (typeof args[1] === "function") {
|
|
2594
|
+
handler = args[1];
|
|
2595
|
+
}
|
|
2596
|
+
else {
|
|
2597
|
+
throw new TypeError("handler is not a function");
|
|
2598
|
+
}
|
|
2599
|
+
}
|
|
2600
|
+
else if (args.length === 3) {
|
|
2601
|
+
if (typeof args[1] === "function") {
|
|
2602
|
+
handler = args[1];
|
|
2603
|
+
options = args[2];
|
|
2604
|
+
}
|
|
2605
|
+
else {
|
|
2606
|
+
selector = args[1];
|
|
2607
|
+
handler = args[2];
|
|
2608
|
+
}
|
|
2609
|
+
}
|
|
2610
|
+
else if (args.length === 4) {
|
|
2611
|
+
selector = args[1];
|
|
2612
|
+
handler = args[2];
|
|
2613
|
+
options = args[3];
|
|
2614
|
+
}
|
|
2615
|
+
else {
|
|
2616
|
+
throw new Error("args length error");
|
|
2617
|
+
}
|
|
2618
|
+
let $click = null;
|
|
2619
|
+
let isDoubleClick = false;
|
|
2620
|
+
let timer = void 0;
|
|
2621
|
+
/** 是否是移动端点击 */
|
|
2622
|
+
let isMobileTouch = false;
|
|
2623
|
+
const dblclick_handler = async (evt) => {
|
|
2624
|
+
if (evt.type === "dblclick" && isMobileTouch) {
|
|
2625
|
+
// 禁止在移动端触发dblclick事件
|
|
2626
|
+
return;
|
|
2627
|
+
}
|
|
2628
|
+
await handler(evt);
|
|
2629
|
+
};
|
|
2630
|
+
const dblClickListener = this.on($el, "dblclick", dblclick_handler, options);
|
|
2631
|
+
const touchEndListener = this.on($el, "touchend", selector, (evt, selectorTarget) => {
|
|
2632
|
+
isMobileTouch = true;
|
|
2633
|
+
CommonUtils.clearTimeout(timer);
|
|
2634
|
+
timer = void 0;
|
|
2635
|
+
if (isDoubleClick && $click === selectorTarget) {
|
|
2636
|
+
isDoubleClick = false;
|
|
2637
|
+
$click = null;
|
|
2638
|
+
/* 判定为双击 */
|
|
2639
|
+
dblclick_handler(evt);
|
|
2640
|
+
}
|
|
2641
|
+
else {
|
|
2642
|
+
timer = CommonUtils.setTimeout(() => {
|
|
2643
|
+
isDoubleClick = false;
|
|
2644
|
+
// 判断为单击
|
|
2645
|
+
}, 200);
|
|
2646
|
+
isDoubleClick = true;
|
|
2647
|
+
$click = selectorTarget;
|
|
2648
|
+
}
|
|
2649
|
+
}, options);
|
|
2650
|
+
return {
|
|
2651
|
+
off() {
|
|
2652
|
+
$click = null;
|
|
2653
|
+
dblClickListener.off();
|
|
2654
|
+
touchEndListener.off();
|
|
2655
|
+
},
|
|
2656
|
+
};
|
|
2657
|
+
}
|
|
2545
2658
|
preventEvent(...args) {
|
|
2546
2659
|
/**
|
|
2547
2660
|
* 阻止事件的默认行为发生,并阻止事件传播
|