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;

      },