背景:一些业务场景需要对比如识别二维码的长按事件进行上报、具体用途因业务而异
思路:一般二维码扫描时机在长按后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>

HUMILITY
74 声望6 粉丝

DONT WASTE YOUR TIME