微信小程序单击事件与长按事件冲突的解决办法
众所周知,在小程序中,长按事件一松手是会触发单击事件的,而在我们的实际需求中,往往是需要单击事件和长按事件并存的。
然而,小程序却又好像想到了这种情况似的,给了我们一个触摸开始,一个触摸结束
也就是,一共有四个事件:
- bindtouchstart:触屏开始
- bindtouchend :触屏结束
- bindlongtap:长按事件
- catchtap:单击事件
这就给了我们手动区别长按与单击的可能
我们希望的效果是:
1.单击就是单击,没有什么可解释的
2.长按事件触发后就不要单击事件再触发了。
ok,我是这么做的:
1.首先做两个变量,一个用来控制单击是否可用,一个用来检查长按是否被触发
//page data
data: {
taplock: false, //单击锁,当此值为false时,单击不生效
longtap: false,//是否触发了长按
}
2.在各个事件中一顿操作
tap(e) {
if (this.data.taplock)
console.log("单击事件触发")
},
// 长按事件
longtap() {
console.log("locked")
this.data.taplock = false //当长按事件触发后,锁定单击
this.data.longtap = true
},
// 触摸开始
touchStart() {
this.data.taplock = true //打开单击
this.data.longtap = false //初始化长按事件触发状态
console.log("触摸开始")
},
// 触摸结束
touchEnd() {
if (this.data.longtap)
console.log("触摸结束") //如果长按触发了,那么正常结束就好了
else
this.data.taplock = true //如果长按没触发,说明是单击,打开单击锁
},
亲测可用,完美解决
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步