zoukankan      html  css  js  c++  java
  • 微信小程序区分点击,长按事件

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

      事务分类

        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){
        //这里可以做长按事件要处理的
      }
     
      以上就是区分点击事件和长按事件的方法啦,如果有不对的地方或者有跟简单的方法,欢迎留言
     
     

        

  • 相关阅读:
    js文字跳动效果
    js文字效果
    centos7安装Logwatch配合msmtp邮件客户端发送服务器监控分析日志
    子查询
    Hexo添加字数统计、阅读时长
    基于visual Studio2013解决C语言竞赛题之0523魔方阵
    基于visual Studio2013解决C语言竞赛题之0522和为素
    基于visual Studio2013解决C语言竞赛题之0521圆盘求和
    基于visual Studio2013解决C语言竞赛题之0520相邻元素
    基于visual Studio2013解决C语言竞赛题之0519最大值
  • 原文地址:https://www.cnblogs.com/ttqi/p/10248213.html
Copyright © 2011-2022 走看看