JavaScript 实现 touch 长按事件及引出clearTimeout到底干了什么

背景：实习公司要求页面适配移动端，搜集了一堆资料发现原生 JS 居然有触摸（Touch）事件！！！！也有触摸对象什么的，但是却没有长按事件，这个需要用所以得自己 “创作”

Touch 事件简介

首先介绍下四个基本的 touch 事件

touchstart：触摸触发（手指按下）touchmove：触摸滑动触发（手指移动）touchend：触摸离开屏幕时触发（手指抬起）touchcancel：触摸点被中断时触发（一般用得少，比如创建了太多触摸点有可能导致中断）

实现长按

思路：利用定时器，当一直触摸到指定时间且未发生其他动作时，视作发生长按，所以其间还会有判断是否移动、是否点击的处理（具体操作是利用前三个事件结合起来实现）

// dom 为你需要绑定的节点，三个事件绑定到同一个节点上，比如背景、地图等节点

touchLong() {

let timeOutEvent = 0 // 用来设置定时器，且 0 数值用于后续判断

dom.addEventListener('touchstart', function(e) {

// 阻止它的默认事件

e.preventDefault()

// 当开始触摸的时候定时器计时

timeOutEvent = setTimeout(function() {

timeOutEvent = 0

console.log('你长按了')

}, 1000) // 达到 1s 就会实现长按效果

})

dom.addEventListener('touchmove', function(e) {

// 如果触摸未达到 1s 且开始移动，则清除计时器

clearTimeout(timeOutEvent)

timeOutEvent = 0

})

dom.addEventListener('touchend', function(e) {

// 如果触摸未达到 1s 且离开屏幕，则清除计时器

clearTimeout(timeOutEvent)

if (timeOutEvent !== 0) {

// 判断是否发生长按

console.log('你这是点击，不是长按')

}

return false

})

}

timeOutEvent 被 clearTimeout 后又赋值是什么意思呢？

可能有人不懂clearTimeout清除了计时器到底是清除了什么，且清除后timeOutEvent的值又是如何？，下面我们看一张图就搞清楚！！

解释一下，首先timer1计时器定时 1s，1s 后控制台打印了1，此时timer1的值为72（俗称计时器标识符，是一个数字，随机分配），然后又写一个定时器timer2也定时1s，但同时执行了clearTimeout语句，1s 后并没有任何显示，继续打印timer2的值为167所以，clearTimeout只是清除了计时器，而没有改变标识符的值，所以一般要么删除标识符（timer1/2等），要么重新赋值以供后续使用

如果觉得对你有帮助的话，点个赞呗~

反正发文又不赚钱，交个朋友呗~

如需转载，请注明出处foolBirdd