微信小程序長按事件觸發點擊事件的BUG處理

微信小程序開發說實話仍是有點糟心的，通過事件冒泡的坑以後，又遇到了長按事件(longtap)必觸發點擊事件(tap)的BUG

實例代碼

• wxml

<view class="container">
  <view>
    <button bindtap="tap" bindlongtap="longtap">長按我</button>
  </view>
</view>

• js

Page({
  data: {
  },
  tap: function() {
    console.log('觸發了 tap')
  },
  longtap: function () {
    console.log('觸發了 longtap')
  }
})

• 效果

解決方法

Google後肯定是小程序有意(B)爲(U)之(G)後，看了一下網上的解決方法，基本都是經過touchstart和touchend從新斷定tap和longtap事件的，我的不是很喜歡。

看一下微信小程序的事件定義：

• tap, 手指觸摸後立刻離開

• longtap, 手指觸摸後，超過350ms再離開

也就是說，目前的觸發的順序是 longtap -> touchend -> tap

那麼其實解決也很清晰了，簡單來講就是 加把鎖, 應用到上面的代碼上：

Page({
  data: {
    lock: false
  },
  tap: function() {
    //檢查鎖
    if (this.data.lock) {
      return;
    }
    console.log('觸發了 tap')
  },
  touchend: function() {
    if (this.data.lock) {
      //開鎖
      setTimeout(() => {
        this.setData({ lock: false });
      }, 100);
    }
  },
  longtap: function () {
    //鎖住
    this.setData({lock: true});
    console.log('觸發了 longtap')
  }
})

看一下效果

延伸

大部分狀況下，咱們都是不須要在touchend中加鎖的，由於長按操做會觸發其餘的異步操做，只要保證異步操做的最後把鎖解除了便可。