点击事件的执行:
<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})
    }
}



















