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

 

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

 

 

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

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

 

1,触屏事件

复制代码
touchstart: //手指放到屏幕上时触发

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

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

touchcancel: //系统取消touch事件的时候触发,这个好像比较少用
复制代码

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

<img  alt=""  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;

      },
复制代码
posted @ 2019-12-23 14:33  GordonDicaprio  阅读(1586)  评论(0编辑  收藏