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

加伊bky發表於2021-11-12
微信小程式事件

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

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

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

  • 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 //如果長按沒觸發，說明是單擊，開啟單擊鎖
    },

親測可用，完美解決

相關文章