移动端 tach 事件

今日分享

在模拟器下不支持用on的方式来给元素加touch事件，推荐用addEventListener方式。

• touchstart
• 手指触碰元素
• touchmove
• 手指触碰元素之后，在屏幕中进行移动
• touchend 手指弹起
• 手指触碰元素之后，在屏幕中抬起

与 mouth 事件的区别

mouse事件的触发必须在元素范围内，且在移动端会有300ms左右的延迟。

首先 touch 包含三类事件，它们分别是：touchstart、touchmove、touchend 。

touches：正在触摸屏幕的所有手指的一个列表。

targetTouches：正在触摸当前 DOM 元素上的手指的一个列表。

changedTouches：涉及当前事件的手指的一个列表

Tach 属性

事件对应的三个列表虽然名字不一样，但是它们里面装的东西都是差不多的，包含了当前事件的一些相关信息，比如：一些坐标信息。

TouchList {0: Touch, length: 1}
length:1
0:Touch
    clientX:65 // 触摸点在浏览器窗口中的横坐标
    clientY:18 // 触摸点在浏览器窗口中的纵坐标
    force:1 // 触摸点压力大小
    identifier:0 // 触摸点唯一标识（ID）
    pageX:65 // 触摸点在页面中的横坐标
    pageY:18 // 触摸点在页面中的纵坐标
    radiusX:11.5 // 触摸点椭圆的水平半径
    radiusY:11.5 // 触摸点椭圆的垂直半径
    rotationAngle:0 // 旋转角度
    screenX:560 // 触摸点在屏幕中的横坐标
    screenY:175 // 触摸点在屏幕中的纵坐标
target:div#touchLog 触摸目标
__proto__:Touch
__proto__:TouchList