微信小程序长按事件触发点击事件的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中加锁的，由于长按操做会触发其余的异步操做，只要保证异步操做的最后把锁解除了便可。