当前位置 博文首页 > 白徽的博客:长按事件bindlongtap与点击事件bindtap的冲突 两种

    白徽的博客:长按事件bindlongtap与点击事件bindtap的冲突 两种

    作者:[db:作者] 时间:2021-07-15 19:08

    第一种 计算时间

    当我们在一个标签上同时设置bindtap和bindlongtap时, 会发现长按时先出现bindlongtap的事件,然后紧接着也会触发点击事件。
    显然,大部分时候,这并不是我们想要的事件执行结果。
    我们知道,微信小程序中事件执行的顺序是
    点击:touchstart → touchend → tap
    长按 touchstart → longtap → touchend → tap

    解决方法:
    通过点击事件来判定是点击还是长按。

    bindTouchStart: function(e) {
        this.startTime = e.timeStamp;
    },
    bindTouchEnd: function(e) {
        this.endTime = e.timeStamp;
    },
    bindTap: function(e) {
        if(this.endTime  - this.startTime < 350) {
            console.log("点击")
        }
    },
    bingLongTap: function(e) {
        console.log("长按");
    }
    
    

    第二种 定义一个变量

    对于同一控件同时设置bindtap和bindlongtap,会发现长按时先出现bindlongtap的事件,然后触发点击事件。

    小程序中事件执行的顺序是

    点击:touchstart → touchend → tap
    长按 touchstart → longtap → touchend → tap

    为了解决这个冲突,在没有选择的动作下,才会出发 tap 事件:

    • 定义一个变量 longtap = 0

    • 在 longtap 事件中,赋值 longtap = 1

    • 在 tap 事件中,如果 longtap 的值是 0,则正常处理

    wxml代码

      bindlongtap="deleteLongClick" bindtap="justClick"
    

    js代码

       * 页面的初始数据
       */
      data: {
        longtap:0,
      },
                    
      /**
       * 长按删除
       */
      deleteLongClick: function(event) {
        this.longtap = 1;
      }
    
    
      /**
       * 单击事件
       */
      justClick:function(e){
        if(this.longtap != 1){
          wx.navigateTo({
            url: '/pages/modify/modify?id='+e.currentTarget.dataset.index,
          })
        }
      },
    
    
    cs