vue移动端长按事件(ios移动端echarts长按出现空白)
自定义指令Vue.directive('longtouch', function (el, binding) {
let oDiv = el
let x = 0
let y = 0
let z = 0
let timer = null
oDiv.addEventListener('touchstart', function (e) {
if (e.touches.length > 1) {
return false
}
z = 0
timer = setTimeout(function () {
z = 1
}, 500)
x = e.touches[0].clientX
y = e.touches[0].clientY
e.preventDefault()
}, false)
document.addEventListener('touchmove', function (e) {
if (x !== e.touches[0].clientX || y !== e.touches[0].clientY) {
clearTimeout(timer)
return false
}
}, false)
document.addEventListener('touchend', function (ev) {
if (z !== 1) {
clearTimeout(timer)
x = 0
y = 0
return false
} else {
x = 0
y = 0
z = 0
alert('长按') // 长按alert vue ios长按图表空白
}
}, false)
})
页面使用
<div ref="trend" v-longtouch="timeOutEvent"></div>
data () {
return {
timeOutEvent: 0
}
}