微信小程序区分点击,长按事件

时间:2022-05-30 07:43:50

  在上代码之前,微信小程序点击事件,长按事件的触发顺序需要我们了解一下下

  事务分类

    touchstart:手指触摸

    longtap:手指触摸后后,超过350ms离开

    touchend:手指触摸动作结束

    tap:手指触摸后离开

事件 触发顺序
单击 touchstart → touchend → tap
长按 touchstart → longtap → touchend → tap

  通过上表格可以发现,单击事件与长按事件的区别就在于 longtap事件,所以我们通过longtap事件进行区分。现在可以开始上代码啦

  .xwml  文件

  <view >
    <image  src='{{urls}}' class="asd" mode="aspectFit" bindtap='nophonefull' id="{{urls}}"  bindlongtap="bingLongTap" bindtouchstart="touchStart" bindtouchend="touchEnd"></image>
  </view>
 
  .js  文件
  //定义用到的变量
  data: {
    startTime:0,   //点击开始时间
    endTime:0  //点击结束时间
  }
  //手指触摸开始赋值
  touchStart: function (e) {
    this.startTime = e.timeStamp;
  }
  //手指触摸结束赋值
  touchEnd: function (e) {
    this.endTime = e.timeStamp;
  }
  // nophonefull 不管点击还是长按都会触发的事件
  nophonefull: function () {
    //通过判断手指触摸时间来判断是否是点击事件,当时间差小于350时,为点击事件
    if (this.endTime - this.startTime < 350) {
      //这里可以做点击事件的处理啦
    }
  }
  //只有长按事件才会触发 
  bingLongTap : function(e){
    //这里可以做长按事件要处理的
  }
 
  以上就是区分点击事件和长按事件的方法啦,如果有不对的地方或者有跟简单的方法,欢迎留言