微信小程序長按事件觸發(fā)點(diǎn)擊事件的BUG處理

發(fā)布時間：2018-04-20 10:57 所屬欄目：小程序開發(fā)教程

微信小程序開發(fā)說實(shí)話還是有點(diǎn)糟心的，經(jīng)過時間冒泡的坑之后，又遇到了長按事件(longtap)必觸發(fā)點(diǎn)擊事件(tap)的BUG

如下代碼

wxml

<viewclass="container">
  <view>
    <buttonbindtap="tap"bindlongtap="longtap">長按我</button>
  </view>
</view>

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

效果

解決方法

Google后確定是BUG后，看了一下網(wǎng)上的解決方法，基本都是通過 touchstart 和 touchend重新判定 tap 和 longtap 事件的，個人不是很喜歡。

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

tap, 手指觸摸后馬上離開
longtap, 手指觸摸后，超過350ms再離開

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

那么其實(shí)解決也很清晰了，簡單來說就是加把鎖 , 應(yīng)用到上面的代碼上：

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

看一下效果