微信小程序單擊事件與長按事件沖突的解決辦法

眾所周知，在小程序中，長按事件一松手是會觸發單擊事件的，而在我們的實際需求中，往往是需要單擊事件和長按事件並存的。

然而，小程序卻又好像想到了這種情況似的，給了我們一個觸摸開始，一個觸摸結束

也就是，一共有四個事件：

• bindtouchstart：觸屏開始
• bindtouchend ：觸屏結束
• bindlongtap：長按事件
• catchtap：單擊事件

這就給了我們手動區別長按與單擊的可能

我們希望的效果是：

1.單擊就是單擊，沒有什么可解釋的

2.長按事件觸發后就不要單擊事件再觸發了。

ok，我是這么做的：

1.首先做兩個變量，一個用來控制單擊是否可用，一個用來檢查長按是否被觸發

//page data
  data: {
    taplock: false, //單擊鎖，當此值為false時，單擊不生效
    longtap: false,//是否觸發了長按
  }

2.在各個事件中一頓操作

	tap(e) {
      if (this.data.taplock)
        console.log("單擊事件觸發")
    },
    // 長按事件
    longtap() {
      console.log("locked")
      this.data.taplock = false //當長按事件觸發后，鎖定單擊
      this.data.longtap = true
    },
    // 觸摸開始
    touchStart() {
      this.data.taplock = true  //打開單擊
      this.data.longtap = false //初始化長按事件觸發狀態
      console.log("觸摸開始")
    },
    // 觸摸結束
    touchEnd() {
      if (this.data.longtap)
        console.log("觸摸結束") //如果長按觸發了，那么正常結束就好了
      else
        this.data.taplock = true //如果長按沒觸發，說明是單擊，打開單擊鎖
    },

親測可用，完美解決