微信小程序实现单机双击并存

2021-11-13 22:00:19 阅读：191 来源： 互联网

wxml:

<view class="img-container" data-fileid="fileID11" bindtap="multipleTap" bindtouchstart="touchStart" bindtouchend="touchEnd">
            点击该区域上传答案
            <image class="display-img" src="{{fileID11}}" mode="widthFix" bindtouchstart='touchStartHandle'
             bindtouchmove='touchMoveHandle' bindload='load' 
            style="width: {{ touch.scaleWidth }}px;height: {{ touch.scaleHeight }}px" ></image>
          </view>

js:

// 单击或者双击触发的事件
   // 触摸开始时间
   touchStartTime: 0,
   // 触摸结束时间
   touchEndTime: 0,  
   // 最后一次单击事件点击发生时间
   lastTapTime: 0, 
   // 单击事件点击后要触发的函数
   lastTapTimeoutFunc: null, 
  /// 按钮触摸开始触发的事件
  touchStart: function(e) {
    this.touchStartTime = e.timeStamp
  },
 
  /// 按钮触摸结束触发的事件
  touchEnd: function(e) {
    this.touchEndTime = e.timeStamp
  },

  //实现单击双击并存
  multipleTap:function(e){
    var that = this
    var fileID = e.currentTarget.dataset.fileid
    // 控制点击事件在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);
        //双击的时候放大图片
        if (that.data[fileID] != ''){
          wx.previewImage({
            current: that.data[fileID], // 当前显示图片的http链接
            urls: [that.data[fileID]] // 需要预览的图片http链接列表
        })
        }
        // wx.showModal({
        //   title: '提示',
        //   content: '双击事件被触发',
        //   showCancel: false
        // })
      } else {
        // 单击事件延时300毫秒执行，这和最初的浏览器的点击300ms延时有点像。
        that.lastTapTimeoutFunc = setTimeout(function () {
          console.log("tap")
          // wx.showModal({
          //   title: '提示',
          //   content: '单击事件被触发',
          //   showCancel: false
          // })
          that.chooseimage(e)
        }, 300);
      }
    }
  },

标签：触发,单击,程序实现,微信,点击,事件,lastTapTime,双击
来源： https://blog.csdn.net/lsyhaoshuai/article/details/121310935

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

微信小程序实现单机双击并存