关于前端:模拟H5长按事件

背景：一些业务场景须要对比方辨认二维码的长按事件进行上报、具体用处因业务而异
思路：个别二维码扫描机会在长按后600ms內触发，以600ms为绝对工夫进行计算
常见api：
@touchstart // 手指触摸手机屏幕时触发
@touchmove // 手指在手机屏幕挪动时触发
@touchend // 手指来到手机屏幕时触发
@touchcancel // 零碎勾销touch事件的时候触发,比方电话
@click // 点击时触发
执行程序

• touchstart > touchmove > touchend > click
• touchmove 与 click事件互斥,即touchmove触发执行，click事件不再执行
• touchend 和 touchcancel实践上不会同时触发
  实现形式：
• 在touchstart事件中获取以后工夫戳

• 在touchmove事件中做判断，

  • 定义规定：在该办法内获取以后工夫戳 减去 在touchstart事件中取到的工夫戳
  • 与600ms做大小判断
• 在touchmove事件中 通过在touchstart事件中定义的办法进行判断、如果小于600ms就 将touchstart事件中获取的工夫戳置为0

• 在touchend中判断

  • touchstart事件中获取的工夫戳 与 在touchmove事件中定义的规定 为true

    • 此时上报你想要的货色
• 在 touchcancel上报

附代码：

<template>
<div>
    <!-- 长按辨认二维码 -->
    <img
      :src="url"
      @touchstart="touchstart()"
      @touchmove="touchmove()"
      @touchend="touchend()"
      @touchcancel="touchcancel()">
</div>
</template>
<script>
  // data
  data () {
    return {
      startTime: 0, // 用户按下的时候工夫戳
      endTime: 0, // 用户手抬起时的工夫戳
      touchTime: 600, // 长按毫秒工夫
      isMove: false
    }
  }
  
  
  
     // methods
  
    // 模仿h5长按事件. 相干参数默认已定义
    touchstart () {
      this.startTime = new Date().getTime()
    },
    touchmove () {
      if (this.isMove) return
      this.isMove = true
      if (!this.timeDiff()) {
        this.startTime = 0
      }
    },
    touchend () {
      if (this.startTime && this.timeDiff()) {
        this.recordLog('上报touchend')
      }
      this.isMove = false
    },
    touchcancel () {
      this.recordLog('上报touchcancel')
      this.isMove = false
    },
    timeDiff () {
      let timeDiff = new Date().getTime() - this.startTime
      let isSend = timeDiff >= this.touchTime
      return isSend
    },
    recordLog (val) {
      console.log('这里是上报的信息', val)
    }
</script>