vue h5页面 解决touchstart，touchmove，touchend，click事件触发产生的问题

当你的需要即要求可以完成触摸事件，又要求有点击事件的时候，我们要搞清楚一个问题，事件触发的排序问题。

1，touchstart>touchmove>touchend>click

2,  touchstart>touchend>click

首先要解决的问题是触摸事件的时候点击事件不要出现（百度一大堆解决方案），看的顺眼那个就用那个，本初我使用的是event.preventDefault()

  <div
            @touchmove.prevent="touchmove"
            @touchend.prevent="touchend"
            @touchstart.prevent="touchstart"
            @click="sample" id="child"
             class="draggable-item" ></div>

我的思路是，触发touchstart方法的时候延迟200毫秒如果是就是触摸事件，否则在touchend里面判断就是点击十点，调用点击事件的方法即可

 touchend(){
      let self = this;
      clearTimeout(self.Loop);
      if (self.Loop !== 0) {
        alert('点击事件')
        this.sample()
      }
      return false;
    },

 touchstart(event){
      let child = document.getElementById('child')
      this.startX = event.targetTouches[0].pageX - child.offsetLeft;
      this.startY = event.targetTouches[0].pageY - child.offsetTop;
      let self = this;
      //执行长按的内容
      self.Loop = setTimeout(function () {
        self.Loop = 0;
      }, 200);
      return false;
    },

touchmove(){
},
sample(){
console.log('点击事件')
}