微信小程序实现同时单击、双击、长按

妖狐艹你老母 2022-05-22 00:09 568阅读 0赞

要实现小程序的单击和长按事件比较简单，直接绑定微信提供的单击和长按事件就可以了，但是要一个组件同时支持单击和长按的操作，而这两个事件又不冲突就需要做一些额外的工作了。因为微信提供的长按事件如果同时绑定了单击事件，那么长按时也会触发单击事件。另外微信没有提供双击事件，所以双击需要自己实现。

首先，需要在js中定义几个变量

// 触摸开始时间 touchStartTime: 0, // 触摸结束时间 touchEndTime: 0, // 最后一次单击事件点击发生时间 lastTapTime: 0, // 单击事件点击后要触发的函数 lastTapTimeoutFunc: null,

然后定义两个记录触摸事件的函数

/// 按钮触摸开始触发的事件 touchStart: function(e) { this.touchStartTime = e.timeStamp }, /// 按钮触摸结束触发的事件 touchEnd: function(e) { this.touchEndTime = e.timeStamp },

在界面中需要绑定点击事件的地方，需要加入bindtouchstart 和bindtouchend,以便记录下按钮开始触摸和结束触摸的时间。其他的分别绑定好单击、双击、长按事件就好了。

<view class="container">
    
    
      <view class = "split"></view>
      <view class = "btn" bindtap="tap" bindtouchstart="touchStart" bindtouchend="touchEnd">
        单击
      </view>
    
    
      <view class = "split"></view>
      <view class = "btn" bindtap="doubleTap" bindtouchstart="touchStart" bindtouchend="touchEnd">
        双击
      </view>
    
    
      <view class = "split"></view>
      <view class = "btn" bindlongtap="longTap" bindtouchstart="touchStart" bindtouchend="touchEnd">
        长按
      </view>
    
    
      <view class = "split"></view>
      <view class = "btn" bindtap="multipleTap" bindlongtap="longTap" bindtouchstart="touchStart" bindtouchend="touchEnd">
        单击／双击／长按
      </view>
    
    </view>

仅有单击不用做特殊的处理：

/// 单击 tap: function(e) { var that = this wx.showModal({ title: '提示', content: '单击事件被触发', showCancel: false }) },

双击和单击并存时的实现，这里实现双击和单击是参考了手机点击网页的300ms延时的方式，原来在iPhone4出来的时候，手机网页比较小，所以iPhone浏览器上加入了双击放大网页的操作，导致网页的点击需要延时300ms才会触发，即300ms内点击两次算双击事件。这里实现是在单击时，将单击事件延迟300ms执行，如果300ms内又有一次点击，则把单击事件取消，然后触发单击事件。

/// 双击 doubleTap: function(e) { var that = this // 控制点击事件在350ms内触发，加这层判断是为了防止长按时会触发点击事件 if (that.touchEndTime - that.touchStartTime < 350) { // 当前点击的时间 var currentTime = e.timeStamp var lastTapTime = that.lastTapTime // 更新最后一次点击时间 that.lastTapTime = currentTime // 如果两次点击时间在300毫秒内，则认为是双击事件 if (currentTime - lastTapTime < 300) { console.log("double tap") // 成功触发双击事件时，取消单击事件的执行 clearTimeout(that.lastTapTimeoutFunc); wx.showModal({ title: '提示', content: '双击事件被触发', showCancel: false }) } } },

单击、双击和长按同时存在的实现：

/// 长按 longTap: function(e) { console.log("long tap") wx.showModal({ title: '提示', content: '长按事件被触发', showCancel: false }) }, /// 单击、双击 multipleTap: function(e) { var that = this // 控制点击事件在350ms内触发，加这层判断是为了防止长按时会触发点击事件 if (that.touchEndTime - that.touchStartTime < 350) { // 当前点击的时间 var currentTime = e.timeStamp var lastTapTime = that.lastTapTime // 更新最后一次点击时间 that.lastTapTime = currentTime // 如果两次点击时间在300毫秒内，则认为是双击事件 if (currentTime - lastTapTime < 300) { console.log("double tap") // 成功触发双击事件时，取消单击事件的执行 clearTimeout(that.lastTapTimeoutFunc); wx.showModal({ title: '提示', content: '双击事件被触发', showCancel: false }) } else { // 单击事件延时300毫秒执行，这和最初的浏览器的点击300ms延时有点像。 that.lastTapTimeoutFunc = setTimeout(function () { console.log("tap") wx.showModal({ title: '提示', content: '单击事件被触发', showCancel: false }) }, 300); } } },

在实际应用时可以灵活应用，多点击事件可以组合操作，比如"单击+双击"，"单击+长按"，"双击+长按"。在我们现在的小程序项目中是有一个地方用上了"单击+双击+长按"的，单击预览图片，双击修改图片类型，长按删除图片。

作者：不想想名字了1  
链接： [https://www.jianshu.com/p/96150ed09e3a][https_www.jianshu.com_p_96150ed09e3a]  
來源：简书  
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

[https_www.jianshu.com_p_96150ed09e3a]: https://www.jianshu.com/p/96150ed09e3a