移动端 Touch 事件梳理和踩坑

前言

在移动端开发中，几乎无法避免 Touch 事件，然而每次遇到 Touch 事件，今天一起来梳理一下 Touch 事件的相关内容和踩坑总结吧！

Touch 事件基础

TouchEvent

touchstart：当手指触摸屏幕的时候触发，即使已经有一个手指放在屏幕上也会触发

touchmove：当手指在屏幕上滑动的时候连续地触发

touchend：当手指从屏幕上离开的时候触发

touchcancel：当一个或多个触摸点以特定于实现的方式被中断（例如，创建了太多触摸点）

TouchList

touches：当前屏幕上所有触摸点的集合列表

targetTouches：绑定事件的元素上的触摸点的集合列表

• 这个属性通常用来判断是否有手指触摸了某个元素，并且可以用来做一些与之相关的交互

changedTouches：触发事件时改变的触摸点的集合

• 对于 touchstart 事件，列出在此次事件中新增加的触点
• 对于 touchmove 事件，列出和上一次事件相比较，发生了变化的触点
• 对于 touchend ，列出离开触摸平面的触点

?

1 2 3

js复制代码    // touchend 触发时     e.touches[0] // undefined     e.changedTouches[0] // TouchEvent