【微信小程序】解决点击(bindtap)和长按(bindlongtap)冲突

news2024/12/29 1:35:37

点击事件的执行：

<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})
    }
}