From 4a1398ae657523111792cbefeb7190dc06037f87 Mon Sep 17 00:00:00 2001 From: anotherso1a <1181581742@qq.com> Date: Tue, 5 Dec 2023 18:03:16 +0800 Subject: [PATCH 1/2] fix: add tap event fallback --- packages/api-proxy/src/common/js/web.js | 40 +++++++++++++++---------- test/utils/touch.js | 9 ++++-- 2 files changed, 32 insertions(+), 17 deletions(-) diff --git a/packages/api-proxy/src/common/js/web.js b/packages/api-proxy/src/common/js/web.js index b5165c28d1..0c85db7809 100644 --- a/packages/api-proxy/src/common/js/web.js +++ b/packages/api-proxy/src/common/js/web.js @@ -1,3 +1,5 @@ +import { isBrowser } from "./utils" + function webHandleSuccess (result, success, complete) { typeof success === 'function' && success(result) typeof complete === 'function' && complete(result) @@ -33,22 +35,30 @@ function createDom (tag, attrs = {}, children = []) { // 在H5中,直接绑定 click 可能出现延时问题,很多点击可以关闭的组件被唤出之后,有概率立马触发点击事件,导致组件被关闭。 // 使用该方法通过 touchstart 和 touchend 模拟 click 事件,解决延时问题。 function bindTap (dom, handler) { - let startTime = 0; let x = 0; let y = 0 - const touchStart = (e) => { - startTime = Date.now() - x = e.touches[0].pageX - y = e.touches[0].pageY - } - const touchEnd = (e) => { - if (Date.now() - startTime < 300 && Math.abs(e.changedTouches[0].pageX - x) < 10 && Math.abs(e.changedTouches[0].pageY - y) < 10) { - handler(e) + const isTouchDevice = isBrowser && document && ('ontouchstart' in document.documentElement) + if (isTouchDevice) { + let startTime = 0; let x = 0; let y = 0 + const touchStart = (e) => { + startTime = Date.now() + x = e.touches[0].pageX + y = e.touches[0].pageY + } + const touchEnd = (e) => { + if (Date.now() - startTime < 300 && Math.abs(e.changedTouches[0].pageX - x) < 10 && Math.abs(e.changedTouches[0].pageY - y) < 10) { + handler(e) + } + } + dom.addEventListener('touchstart', touchStart) + dom.addEventListener('touchend', touchEnd) + return () => { + dom.removeEventListener('touchstart', touchStart) + dom.removeEventListener('touchend', touchEnd) + } + } else { + dom.addEventListener('click', handler) + return () => { + dom.removeEventListener('click', handler) } - } - dom.addEventListener('touchstart', touchStart) - dom.addEventListener('touchend', touchEnd) - return () => { - dom.removeEventListener('touchstart', touchStart) - dom.removeEventListener('touchend', touchEnd) } } diff --git a/test/utils/touch.js b/test/utils/touch.js index a0a527aaf8..22073bed15 100644 --- a/test/utils/touch.js +++ b/test/utils/touch.js @@ -25,6 +25,11 @@ export const createTouchEvent = (type, target, params = {}) => { } export const dispatchTap = (el) => { - el.dispatchEvent(createTouchEvent('touchstart', el)) - el.dispatchEvent(createTouchEvent('touchend', el)) + const isTouchDevice = typeof window !== 'undefined' && document && ('ontouchstart' in document.documentElement) + if (isTouchDevice) { + el.dispatchEvent(createTouchEvent('touchstart', el)) + el.dispatchEvent(createTouchEvent('touchend', el)) + } else { + el.dispatchEvent(new MouseEvent('click', { bubbles: true })) + } } From 8c4d5efb844c2175f18103055ca40425afb504c6 Mon Sep 17 00:00:00 2001 From: anotherso1a <1181581742@qq.com> Date: Tue, 5 Dec 2023 18:04:44 +0800 Subject: [PATCH 2/2] style: lint fix --- packages/api-proxy/src/common/js/web.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/api-proxy/src/common/js/web.js b/packages/api-proxy/src/common/js/web.js index 0c85db7809..54df3dee68 100644 --- a/packages/api-proxy/src/common/js/web.js +++ b/packages/api-proxy/src/common/js/web.js @@ -1,4 +1,4 @@ -import { isBrowser } from "./utils" +import { isBrowser } from './utils' function webHandleSuccess (result, success, complete) { typeof success === 'function' && success(result)