github/dootask
1
0
Fork 0
mirror of https://github.com/kuaifan/dootask.git synced 2025-12-16 14:12:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

perf: 优化触摸长按和右键菜单共存

Browse Source
This commit is contained in:
kuaifan 2024-01-15 21:06:14 +08:00
parent d4ee87f324
commit 2975a0eaf9
1 changed files with 19 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
resources/assets/js/directives/longpress.js vendored
View File

@ -1,8 +1,12 @@
const useModeTouch = $A.isIos() && "ontouchend" in document; const isSupportTouch = "ontouchend" in document;
// 长按或右键指令 // 长按或右键指令
const longpress = { const longpress = {
bind: function (el, binding) { bind: function (el, binding) {
let delay = 500, let delay = 500,
mode = 'default',
isCall = false,
pressTimer = null,
callback = binding.value; callback = binding.value;
if ($A.isJson(binding.value)) { if ($A.isJson(binding.value)) {
delay = binding.value.delay || 500; delay = binding.value.delay || 500;
@ -16,38 +20,43 @@ const longpress = {
el.__longpressContextmenu__ = (e) => { el.__longpressContextmenu__ = (e) => {
e.preventDefault() e.preventDefault()
e.stopPropagation() e.stopPropagation()
if (!useModeTouch) { if (mode === 'default') {
callback(e, el) callback(e, el)
} }
} }
el.addEventListener('contextmenu', el.__longpressContextmenu__); el.addEventListener('contextmenu', el.__longpressContextmenu__);
// 不支持touch // 不支持touch
if (!useModeTouch) { if (!isSupportTouch) {
return return
} }
// 定义变量
let pressTimer = null
let isCall = false
// 创建计时器（ 500秒后执行函数 ） // 创建计时器（ 500秒后执行函数 ）
el.__longpressStart__ = (e) => { el.__longpressStart__ = (e) => {
if (e.type === 'click' && e.button !== 0) { if (e.type === 'click' && e.button !== 0) {
return return
} }
mode = 'touch'
isCall = false isCall = false
if (pressTimer === null) { if (pressTimer === null) {
pressTimer = setTimeout(() => { pressTimer = setTimeout(() => {
if (mode === 'touch') {
isCall = true isCall = true
callback(e.touches[0], el) callback(e.touches[0], el)
}
}, delay) }, delay)
} }
} }
// 取消计时器 // 取消计时器
el.__longpressCancel__ = (e) => { el.__longpressCancel__ = (e) => {
if (pressTimer !== null) { if (pressTimer !== null) {
clearTimeout(pressTimer) clearTimeout(pressTimer)
pressTimer = null pressTimer = null
} }
mode = 'default'
} }
// 点击拦截 // 点击拦截
el.__longpressClick__ = (e) => { el.__longpressClick__ = (e) => {
if (isCall) { if (isCall) {
@ -56,9 +65,9 @@ const longpress = {
} }
el.__longpressCancel__(e) el.__longpressCancel__(e)
} }
// 添加事件监听器 // 添加事件监听器
el.addEventListener('touchstart', el.__longpressStart__) el.addEventListener('touchstart', el.__longpressStart__)
// 取消计时器
el.addEventListener('click', el.__longpressClick__) el.addEventListener('click', el.__longpressClick__)
el.addEventListener('touchmove', el.__longpressCancel__) el.addEventListener('touchmove', el.__longpressCancel__)
el.addEventListener('touchend', el.__longpressCancel__) el.addEventListener('touchend', el.__longpressCancel__)
@ -68,7 +77,7 @@ const longpress = {
unbind(el) { unbind(el) {
el.removeEventListener('contextmenu', el.__longpressContextmenu__) el.removeEventListener('contextmenu', el.__longpressContextmenu__)
delete el.__longpressContextmenu__ delete el.__longpressContextmenu__
if (!useModeTouch) { if (!isSupportTouch) {
return return
} }
el.removeEventListener('touchstart', el.__longpressStart__) el.removeEventListener('touchstart', el.__longpressStart__)