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

實(shí)例代碼

• wxml

<view class="container">
  <view>
    <button bindtap="tap" bindlongtap="longtap">長(zhǎng)按我button>
  view>
view>

• js

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

• 效果

解決方法

Google后確定是小程序有意(B)為(U)之(G)后，看了一下網(wǎng)上的解決方法，基本都是通過(guò)touchstart和touchend重新判定tap和longtap事件的，個(gè)人不是很喜歡。

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

• tap, 手指觸摸后馬上離開

• longtap, 手指觸摸后，超過(guò)350ms再離開

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

那么其實(shí)解決也很清晰了，簡(jiǎn)單來(lái)說(shuō)就是 加把鎖, 應(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')
  }
})

看一下效果

延伸

大部分情況下，我們都是不需要在touchend中加鎖的，因?yàn)殚L(zhǎng)按操作會(huì)觸發(fā)其他的異步操作，只要保證異步操作的最后把鎖解除了即可。

微信小程序的分享問(wèn)題

var id=options.id;