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