小程序 NOTE--重复点击问题

最近在做小程序，在真机测试阶段发现有重复点击的情况，这直接导致了返回的时候不停的返回多个页面，心累.jpg，但是方法总比困难多呗，填坑啊！

下面说一下解决的方法

• step1: data里面定义三个属性

	touchStartTime: 0, // 触摸开始时间
	touchEndTime: 0, // 触摸结束时间
	lastTapTime: 0 // 最后一次单击事件点击发生时间

• step2：定义三个事件方法

	// 防止重复点击
      touchStart(e) {
        var _that=this;
        _that.touchStartTime = e.timeStamp;
      },
      touchEnd(e) {
        var _that=this;
        _that.touchEndTime = e.timeStamp;
      },
      doubleTap(e) {
        var vm = this;
        // 控制点击事件在350ms内触发，加这层判断是为了防止长按时会触发点击事件
        if (vm.touchEndTime - vm.touchStartTime < 350) {
          // 当前点击的时间
          var currentTime = e.timeStamp;
          console.log(currentTime);
          var lastTapTime = vm.lastTapTime;
          console.log(lastTapTime);
          // 更新最后一次点击时间
          vm.lastTapTime = currentTime;
          // 如果两次点击时间在300毫秒内，则认为是双击事件
          if (currentTime - lastTapTime > 300) {
            // do something 点击事件具体执行那个业务
          }
        }
      },

• step3: 触发三个事件

<div @click="submitAll" @tap="doubleTap" @touchstart="touchStart" @touchend="touchEnd"">Submit</div>

Bingo~