移动web（三）touch事件详解_touchmove事件多少秒触发一次-优快云博客

本文详细介绍了移动Web中touch事件的工作原理，包括touchstart、touchmove、touchend三种基本事件及其实现细节，并探讨了changedTouches、targetTouches、touches三个触摸列表的作用与区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

移动web（三）touch事件详解

1、touch事件里面包含三个事件

touchstart 手指碰到屏幕的时候触发，不管当前有多少只手指，触发一次
touchmove 手指在屏幕上移动的时候不断触发，连续触发，通常我们再滑屏页面，
会调用event的preventDefault()可以阻止默认情况的发生：阻止页面滚动
touchend 当手指离开屏幕的时候触发，触发一次

所有的touch事件必须通过addEventListener去绑定，用on是没有作用的

每个触摸事件都包括了三个触摸列表，是一个数组,一共有三个手指列表changedTouches、targetTouches、touches
1）changedTouches当前最新的手指列表
2）targetTouches当前目标上所有的手指列表
3）touches屏幕上所有的手指列表
【注意】changedTouches 在end事件里面可以拿到，但是targetTouches touches是拿不到。
changedTouches页面上最新更改的所有触摸，在touchend里面触发，只有touchend的才可以获取even手指坐标，在touchend事件的时候event只会记录changedtouches

2、支持性

所有被测试的浏览器都支持touchstart、touchend和touchmove事件。规范提供了额外的三个触摸事件，但被测试的浏览器没有支持它们：
1）touchenter：移动的手指进入一个DOM元素。
2）toucheleave：移动手指离开一个DOM元素。
3）touchcancel：触摸被中断（实现规范）。