当前位置 博文首页 > 白徽的博客:长按事件bindlongtap与点击事件bindtap的冲突 两种
当我们在一个标签上同时设置bindtap和bindlongtap时, 会发现长按时先出现bindlongtap的事件,然后紧接着也会触发点击事件。
显然,大部分时候,这并不是我们想要的事件执行结果。
我们知道,微信小程序中事件执行的顺序是
点击:touchstart → touchend → tap
长按 touchstart → longtap → touchend → tap
解决方法:
通过点击事件来判定是点击还是长按。
bindTouchStart: function(e) {
this.startTime = e.timeStamp;
},
bindTouchEnd: function(e) {
this.endTime = e.timeStamp;
},
bindTap: function(e) {
if(this.endTime - this.startTime < 350) {
console.log("点击")
}
},
bingLongTap: function(e) {
console.log("长按");
}
对于同一控件同时设置bindtap和bindlongtap,会发现长按时先出现bindlongtap的事件,然后触发点击事件。
小程序中事件执行的顺序是
点击:touchstart → touchend → tap
长按 touchstart → longtap → touchend → tap
为了解决这个冲突,在没有选择的动作下,才会出发 tap 事件:
定义一个变量 longtap = 0
在 longtap 事件中,赋值 longtap = 1
在 tap 事件中,如果 longtap 的值是 0,则正常处理
wxml代码
bindlongtap="deleteLongClick" bindtap="justClick"
js代码
* 页面的初始数据
*/
data: {
longtap:0,
},
/**
* 长按删除
*/
deleteLongClick: function(event) {
this.longtap = 1;
}
/**
* 单击事件
*/
justClick:function(e){
if(this.longtap != 1){
wx.navigateTo({
url: '/pages/modify/modify?id='+e.currentTarget.dataset.index,
})
}
},
cs