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

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

实例代码

wxml

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

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中加锁的，因为长按操作会触发其他的异步操作，只要保证异步操作的最后把锁解除了即可。

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

如何解决微信小程序用户高频率触发点击事件？
<view bindtap='debounce' bindtouchstart="touchStart" bindtouchend="touchEnd"& ...
微信小程序长按和点击同时存在时，2个都会触发的问题
问题描述: 在列表上实现长按弹框删除,点击进入详情页.在模拟器上正常,但在手机端,长按同时会触发点击. 长按.点击触发顺序: 点击:touchstart → touchend → tap ...
微信小程序入门一：点击事件
公众号:柏战不殆(Baiman_Ber) //index.js Page({data:{src:'../images/公众号.jpg',data:'点击我呀'},//点击事件click:functio ...
微信小程序 — 长列表组件 recycle-view 详细教学
微信小程序 - 长列表组件 recycle-view 踩坑问题全解写在前面引入长列表组件 recycle-view 长列表组件 recycle-view 的使用问题一.如何增加下拉刷新功能? 问 ...
微信小程序长按保存图片
微信小程序长按保存图片 wxml部分 <image data-url="{{item}}" bindlongtap="longPressSaveImg " ...
微信小程序长按图片发送给好友
问题描述微信小程序长按图片发送给好友解决方法直接在<image></image>标签添加:show-menu-by-longpress="true" ...
微信小程序长按识别二维码，小程序相关问题总结
微信小程序长按识别二维码,小程序相关问题总结开发小程序中,长按识别二维码,小程序码跳转,已知问题整理: 小程序中,不支持长按识别二维码,和小程序码. 可利用小程序图片预览功能识别小程序码并进行跳 ...
微信小程序---地图导航（点击地址，可以进行导航）
微信小程序-地图导航(点击地址,可以进行导航) // 地图getLocation(e){var that = this,address = e.currentTarget.dataset.addres ...
微信小程序for循环里面添加input事件
1,在微信小程序for循环里面添加input事件,并把input输入值添加到列表里面 2.wxml <view class="item" wx:for="{{lis ...
微信小程序使用echarts实时更新数据以及常见bug
** 微信小程序使用echarts实时更新数据以及常见bug ** 参考echarts官方文档:https://echarts.apache.org/zh/tutorial.html 下载小程序ech ...

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

实例代码

解决方法

延伸

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

最新文章

热门文章