微信小程序长按事件触发点击事件的BUG处理

微信小程序开发说实话还是有点糟心的,经过事件冒泡的坑之后,又遇到了长按事件(longtap)必触发点击事件(tap)的BUG

如下代码

  • wxml
1
2
3
4
5
<view class="container">
<view>
<button bindtap="tap" bindlongtap="longtap">长按我</button>
</view>
</view>
  • js
1
2
3
4
5
6
7
8
9
10
Page({
data: {
},
tap: function() {
console.log('触发了 tap')
},
longtap: function () {
console.log('触发了 longtap')
}
})
  • 效果

longtap触发tap演示

解决方法

Google后确定是小程序有意(B)为(U)之(G)后,看了一下网上的解决方法,基本都是通过touchstarttouchend重新判定taplongtap事件的,个人不是很喜欢。

看一下微信小程序的事件定义:

  • tap, 手指触摸后马上离开
  • longtap, 手指触摸后,超过350ms再离开

也就是说,目前的触发的顺序是 longtap -> touchend -> tap

那么其实解决也很清晰了,简单来说就是 加把锁, 应用到上面的代码上:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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')
}
})

看一下效果

longtap触发tap演示

延伸

大部分情况下,我们都是不需要在touchend中加锁的,因为长按操作会触发其他的异步操作,只要保证异步操作的最后把锁解除了即可。

本文使用「CC BY 4.0」创作共享协议,只要在使用时署名,您可以对本文进行转载、节选、混编、二次创作,并允许商业性使用。
本文为作者原创,如果您认为本文对您有帮助,欢迎打赏作者