vue移动端长按事件（ios移动端echarts长按出现空白）

main.js

自定义指令

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
    }
}