微信小程序单击事件与长按事件冲突的解决办法

众所周知,在小程序中,长按事件一松手是会触发单击事件的,而在我们的实际需求中,往往是需要单击事件和长按事件并存的。

然而,小程序却又好像想到了这种情况似的,给了我们一个触摸开始,一个触摸结束

也就是,一共有四个事件:

  • bindtouchstart:触屏开始
  • bindtouchend :触屏结束
  • bindlongtap:长按事件
  • catchtap:单击事件

这就给了我们手动区别长按与单击的可能

我们希望的效果是:

1.单击就是单击,没有什么可解释的

2.长按事件触发后就不要单击事件再触发了。

ok,我是这么做的:

1.首先做两个变量,一个用来控制单击是否可用,一个用来检查长按是否被触发

//page data
  data: {
    taplock: false, //单击锁,当此值为false时,单击不生效
    longtap: false,//是否触发了长按
  }

2.在各个事件中一顿操作

	tap(e) {
      if (this.data.taplock)
        console.log("单击事件触发")
    },
    // 长按事件
    longtap() {
      console.log("locked")
      this.data.taplock = false //当长按事件触发后,锁定单击
      this.data.longtap = true
    },
    // 触摸开始
    touchStart() {
      this.data.taplock = true  //打开单击
      this.data.longtap = false //初始化长按事件触发状态
      console.log("触摸开始")
    },
    // 触摸结束
    touchEnd() {
      if (this.data.longtap)
        console.log("触摸结束") //如果长按触发了,那么正常结束就好了
      else
        this.data.taplock = true //如果长按没触发,说明是单击,打开单击锁
    },

亲测可用,完美解决

posted @   神王·德莱厄斯  阅读(1249)  评论(0编辑  收藏  举报
点击右上角即可分享
微信分享提示