点击事件的执行:
<button bindtap="bindtap" bindtouchstart="touchstart" bindtouchend="touchend">按钮</button>
可以看到顺序为:touchstart → touchend → tap
长按事件的执行:
<button bindtap="bindtap" bindlongtap="bindlongtap" bindtouchstart="touchstart" bindtouchend="touchend">按钮</button>
可以看到顺序为:touchstart → longtap → touchend → tap
当我们在一个标签上同时设置bindtap
和bindlongtap
时, 会发现长按时先触发bindlongtap的事件,松开后还会触发tap事件,就没有达到预期的效果。
场景:一个按钮长按时颜色发生变化,松开时颜色恢复,并且点击时无任何变化
思路:在data中用一个状态去维护,长按与松开时去改变这个状态然后控制颜色的变化
实现:
<button bindlongtap="bindlongtap" bindtouchend="touchend" style="background-color: {{active? '#10C0D6' : '#e7fafd'}};"> </button>
data: {
active: false
},
bindlongtap() {
this.setData({active: !this.data.active})
},
touchend() {
this.setData({active: !this.data.active})
}
可以发现长按与松开时确实达到了我们想要的效果,但是当我们点击按钮时,按钮的颜色也发生了变化,原因就是点击的时候也触发了touchend
事件导致状态发生改变,没有达到我们的需求。
那么要如何判断是长按还是点击触发的touchend
事件?
官方给出的界定是从触摸开始到触摸结束要超过350ms就是长按
那么我们可以在触摸开始的时候记录一个时间,在触摸结束的时候记录一个时间,借助事件对象的参数timeStamp
<button bindlongtap="bindlongtap" bindtouchstart="touchstart" bindtouchend="touchend" style="background-color: {{active? '#10C0D6' : '#e7fafd'}};"> </button>
data: {
active: false,
startTimeStamp:0
},
bindlongtap() {
this.setData({active: !this.data.active})
},
touchstart(e) {
this.setData({startTimeStamp:e.timeStamp})
},
touchend(e) {
if(e.timeStamp - this.data.startTimeStamp < 350) {
return false
} else {
this.setData({active: !this.data.active})
}
}