微信小程序 - 点击事件与长按事件共存且不冲突（用户可长按可点击）

前言

对于同一控件同时设置 bindtap 和 bindlongtap ,会发现长按时先出现 bindlongtap 的事件，然后触发点击事件，显然这不是我们想要的。

下面是个已实现功能的实例，请根据业务逻辑进行修改。

wxml

<!-- 此处更换为你的触发组件 -->

<button 
bindtouchstart="handleTouchStart" 
bindtouchend="handleTouchEnd" 
bindlongpress="handleLongPress" 
bindtap="handleClick">点击或长按
</button>

js

主要根据用户手指触摸时间和屏蔽手指触摸开始与结束来实现是点击还是长按操作。

Page({

  data: {},

  /*
  * 事件处理
  */

  // 点击事件
  handleClick: function(e) {

    //如果长按时间小于350则证明是用户进行点击
    if (this.endTime - this.startTime < 350) {
      console.log("点击");
    }
  },

  // 长按事件
  handleLongPress: function(e) {
    console.log("长按");
  },

  // @手指触摸开始(不会触发)
  // @请勿删除代码
  handleTouchStart: function(e) {
    this.startTime = e.timeStamp;
  },

  // @手指触摸结束(不会触发)
  // @请勿删除代码
  handleTouchEnd: function(e) {
    this.endTime = e.timeStamp;
  },

})