微信小程序单击、双击、长按

想要飞翔的小猪

已于 2023-10-24 11:22:17 修改

阅读量1.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签： javascript 1024程序员节

于 2021-01-07 15:48:44 首次发布

本文链接：https://blog.youkuaiyun.com/dwb123456123456/article/details/112315543

微信小程序专栏收录该内容

20 篇文章

订阅专栏

这篇博客详细介绍了如何在微信小程序中实现对按钮的单击、双击和长按事件的处理。通过绑定不同的事件处理函数，如`bindtap`、`binddoubletap`和`bindlongtap`，并结合触摸开始和结束时间戳来判断用户操作类型，实现了精确的事件响应。同时，还展示了如何防止长按时触发单击事件的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

wxml

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

.js

// pages/touchStart/index.js
Page({
  data: {
    // 触摸开始时间
    touchStartTime: 0,
    // 触摸结束时间
    touchEndTime: 0,
    // 最后一次单击事件点击发生时间
    lastTapTime: 0,
    // 单击事件点击后要触发的函数
    lastTapTimeoutFunc: null,
  },
  onLoad: function (options) {},
  // 按钮触摸开始触发的事件
  touchStart: function (e) {
    this.touchStartTime = e.timeStamp;
  },

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

  // 单击、双击
  multipleTap(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);
      };
    };
  },
})