背景:一些业务场景需要对比如识别二维码的长按事件进行上报、具体用途因业务而异
思路:一般二维码扫描时机在长按后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>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。