微信小程序长按事件

一、longtap 

事件触发顺序：touchstart → longtap → touchend → tap

当我们在一个标签上同时设置bindtap和bindlongtap时, 会发现长按时先触发bindlongtap的事件，松开后还会触发tap事件，就没有达到预期的效果。

场景：一个按钮长按时颜色发生变化，松开时颜色恢复，并且点击时无任何变化

思路：在data中用一个状态去维护，长按与松开时去改变这个状态然后控制颜色的变化

 

官方给出的界定是从触摸开始到触摸结束要超过350ms就是长按

那么我们可以在触摸开始的时候记录一个时间，在触摸结束的时候记录一个时间，借助事件对象的参数timeStamp

index.wxml

 <button bindlongtap="bindlongtap" bindtouchstart="touchstart" bindtouchend="touchend"> </button>

index.js

data: {
    startTimeStamp:0
},

bindlongtap() {
    
},

touchstart(e) {
  this.setData({startTimeStamp:e.timeStamp})
},

touchend(e) {
  if(e.timeStamp - this.data.startTimeStamp < 350) { //点击
      return false
    } else { //长按
      
    }
}

二、longpress 

 该事件手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发

index.wxml

<!--可以使用 bindlongpress 属性来绑定长按事件-->
<button bindlongpress="handleLongPress"></button>

index.js

Page({
　　data: {
　　　　// 页面数据
　　},
　　handleLongPress: function(event) {
　　　　// 处理长按事件逻辑
　　　　console.log(event);
　　},
})