1. 程式人生 > 其它 >微信小程式單擊事件與長按事件衝突的解決辦法

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

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

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

也就是,一共有四個事件:

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

親測可用,完美解決