原生 JS 实现 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等），要么重新赋值以供后续使用

如果觉得有收获可以点个赞哦！