fix: avoid touch tap on editable controls
This commit is contained in:
parent
ef5af2ac27
commit
ef02a8488c
@ -2,6 +2,7 @@ const TAP_MOVE_LIMIT = 10
|
||||
const DUPLICATE_EVENT_LIMIT = 700
|
||||
const FOCUSABLE_SELECTOR =
|
||||
'a,button,input,textarea,select,[tabindex],[role="button"],[contenteditable="true"]'
|
||||
const EDITABLE_SELECTOR = 'input,textarea,select,[contenteditable="true"]'
|
||||
|
||||
const getEventPoint = (event) => {
|
||||
if (event.changedTouches?.length) return event.changedTouches[0]
|
||||
@ -13,9 +14,7 @@ const triggerBinding = (el, event) => {
|
||||
const binding = el.__touchTapBinding
|
||||
if (!binding) return
|
||||
|
||||
if (binding.modifiers.self && event.target !== el) {
|
||||
return
|
||||
}
|
||||
if (!shouldTriggerBinding(el, event)) return
|
||||
|
||||
if (binding.modifiers.stop) {
|
||||
event.stopPropagation()
|
||||
@ -29,6 +28,16 @@ const triggerBinding = (el, event) => {
|
||||
}
|
||||
}
|
||||
|
||||
const shouldTriggerBinding = (el, event) => {
|
||||
const binding = el.__touchTapBinding
|
||||
if (!binding) return false
|
||||
return !(binding.modifiers.self && event.target !== el)
|
||||
}
|
||||
|
||||
const isEditableTarget = (target) => {
|
||||
return target instanceof Element && Boolean(target.closest(EDITABLE_SELECTOR))
|
||||
}
|
||||
|
||||
export const vTouchTap = {
|
||||
mounted(el, binding) {
|
||||
el.__touchTapBinding = binding
|
||||
@ -47,6 +56,7 @@ export const vTouchTap = {
|
||||
}
|
||||
|
||||
const activate = (event) => {
|
||||
if (!shouldTriggerBinding(el, event)) return
|
||||
lastActivationTime = Date.now()
|
||||
triggerBinding(el, event)
|
||||
}
|
||||
@ -107,6 +117,7 @@ export const vTouchTap = {
|
||||
|
||||
const onKeydown = (event) => {
|
||||
if (event.key !== 'Enter' && event.key !== ' ') return
|
||||
if (!shouldTriggerBinding(el, event) || isEditableTarget(event.target)) return
|
||||
if (event.key === ' ') {
|
||||
event.preventDefault()
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user