vue中的长按事件和点击事件冲突

Posted 2021-03-21 hfultrastrong

 

<div>
  <img src="/static/images/poi-marker-default.png" @touchstart.prevent="touchin()" @touchend.prevent="clickhandle()" >
</div>

 

data() {
  return {
    Loop:0
  }
},

 

methods: {
  touchin(index){ // 长按事件，按住后等待指定事件触发
    let that=this;
    this.Loop = setTimeout(function() {
      that.Loop = 0;
      console.log("长按触发")
    }, 500);
    return false;

  },
  clickhandle() { // 模拟点击事件（点击后迅速抬起）
    let that=this;
    clearTimeout(this.Loop);
    if(that.Loop!==0){
      console.log("点击事件")
    }
    return false;
  }
}

 

 

ps：最近一直在做移动端的项目，先说下需求，点击图片预览，长按删除，之前在图片上帮定了点击事件和长按事件，但是会有冲突，由于智商不够，百度半天才解决的，最后直接把点击事件给去了，直接用定时器械的，记录下，下次直接用就好了

 

1，触屏事件

touchstart: //手指放到屏幕上时触发

touchmove: //手指在屏幕上滑动式触发

touchend: //手指离开屏幕时触发

touchcancel: //系统取消touch事件的时候触发，这个好像比较少用

由于这次不需要计算移动的距离，所以一只用touchstart和touchend这两个事件

<img    v-for="(item,index) in imgurl" :src="item"  @touchstart.prevent="touchin(index)" @touchend.prevent="cleartime(imgurl[index])" >

.prevent是阻止浏览器的默认行为，如果不需要的话，就不用添加了，根据自己的实际情况

2，直接在methods里写长按方法和点击事件

一定在data里声明Loop =0；不然不管用

500表示触屏时间，可以根据实际情况写，只要达到这个时间就会触发setTimeout里的事件
touchin(index){
        var that=this;
        this.Loop = setTimeout(function() {
          that.Loop = 0;
          //执行长按要执行的内容，如弹出菜单
          MessageBox.confirm(‘是否确认删除‘).then(action => {
            that.imgurl.splice(index,1)

          })
        }, 500);
        return false;

      },

触屏离开的事件

cleartime(index) {
        var that=this;
        clearTimeout(this.Loop);
        if(that.Loop!=0){
          //这里写要执行的内容（尤如onclick事件）
          that.previewPicture(index)
        }
        return false;

      },