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

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('点击事件')
}

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐