JS 触摸事件

1 概述

浏览器的触摸 API 由三个部分组成：

• Touch：一个触摸点
  Touch 接口的实例对象用来表示触摸点（一根手指或者一根触摸笔），包括位置、大小、形状、压力、目标元素等属性

• TouchList：多个触摸点的集合
  触摸动作由多个触摸点（多根手指）组成，多个触摸点的集合由 TouchList 接口的实例对象表示

• TouchEvent：触摸引发的事件实例
  TouchEvent 接口的实例对象代表由触摸引发的事件，只有触摸屏才会引发这一类事件

很多时候，触摸事件和鼠标事件同时触发，即使这个时候并没有用到鼠标
这是为了让那些只定义鼠标事件、没有定义触摸事件的代码，在触摸屏的情况下仍然能用
如果想避免这种情况，可以用 event.preventDefault 方法阻止发出鼠标事件

2 Touch 接口

2.1 概述

Touch 接口代表单个触摸点
触摸点可能是一根手指，也可能是一根触摸笔

Touch构造函数接受一个配置对象作为参数
它有以下属性：

• identifier：必需，类型为整数，表示触摸点的唯一 ID

• target：必需，类型为元素节点，表示触摸点开始时所在的网页元素

• clientX：可选，类型为数值，表示触摸点相对于浏览器窗口左上角的水平距离，默认为 0

• clientY：可选，类型为数值，表示触摸点相对于浏览器窗口左上角的垂直距离，默认为 0

• screenX：可选，类型为数值，表示触摸点相对于屏幕左上角的水平距离，默认为 0

• screenY：可选，类型为数值，表示触摸点相对于屏幕左上角的垂直距离，默认为 0

• pageX：可选，类型为数值，表示触摸点相对于网页左上角的水平位置（即包括页面的滚动距离），默认为 0

• pageY：可选，类型为数值，表示触摸点相对于网页左上角的垂直位置（即包括页面的滚动距离），默认为 0

• radiusX：可选，类型为数值，表示触摸点周围受到影响的椭圆范围的 X 轴半径，默认为 0

• radiusY：可选：类型为数值，表示触摸点周围受到影响的椭圆范围的 Y 轴半径，默认为 0

• rotationAngle：可选，类型为数值，表示触摸区域的椭圆的旋转角度
  单位为度数，在 0 到 90 度之间
  默认值为 0

• force：可选，类型为数值，范围在0到1之间，表示触摸压力
  默认为 0
  0 代表没有压力
  1代表硬件所能识别的最大压力，

2.2 Touch 实例属性

• Touch.identifier
• Touch.screenX，Touch.screenY，Touch.clientX，Touch.clientY，pageX，pageY
• Touch.radiusX，Touch.radiusY，Touch.rotationAngle
• Touch.force
• Touch.target

3 TouchList 接口

TouchList 接口表示一组触摸点的集合
它的实例是一个类似数组的对象，成员是 Touch 的实例对象，表示所有触摸点

它的实例主要通过触摸事件的
TouchEvent.touches
TouchEvent.changedTouches
TouchEvent.targetTouches 这几个属性获取

实例属性和实例方法：

• TouchList.length：数值，表示成员数量（即触摸点的数量）
• TouchList.item()：返回指定位置的成员
  它的参数是该成员的位置编号（从零开始）

4 TouchEvent 接口

4.1 概述

TouchEvent 接口继承 Event 接口

TouchEvent 构造函数可以接受两个参数：

• 第一个参数是字符串，表示事件类型
• 第二个参数是事件的配置对象，该参数可选，该对象属性可选

事件配置对象：

• touches：TouchList 实例，代表所有的当前处于活跃状态的触摸点，默认值是一个空数组 []

• targetTouches：TouchList 实例，代表所有处在触摸的目标元素节点内部、且仍然处于活动状态的触摸点，默认值是一个空数组 []

• changedTouches：TouchList 实例，代表本次触摸事件的相关触摸点，默认值是一个空数组 []

• ctrlKey：布尔值，表示 Ctrl 键是否同时按下，默认值为 false

• shiftKey：布尔值，表示 Shift 键是否同时按下，默认值为 false

• altKey：布尔值，表示 Alt 键是否同时按下，默认值为 false

• metaKey：布尔值，表示 Meta 键（或 Windows 键）是否同时按下，默认值为 false

4.2 TouchEvent 实例属性

• TouchEvent.altKey，TouchEvent.ctrlKey，TouchEvent.shiftKey，TouchEvent.metaKey
• TouchEvent.changedTouches
• TouchEvent.touches
• TouchEvent.targetTouches

5 触摸事件的种类

• touchstart：用户开始触摸时触发
  它的 target 属性返回发生触摸的元素节点

• touchend：用户不再接触触摸屏时（或者移出屏幕边缘时）触发
  它的 target 属性与 touchstart 事件一致的，就是开始触摸时所在的元素节点
  它的 changedTouches 属性返回一个 TouchList 实例，包含所有不再触摸的触摸点（即 Touch 实例对象）

• touchmove：用户移动触摸点时触发
  它的 target 属性与 touchstart 事件一致
  如果触摸的半径、角度、力度发生变化，也会触发该事件

• touchcancel：触摸点取消时触发
  比如在触摸区域跳出一个模态窗口（modal window）
  触摸点离开了文档区域（进入浏览器菜单栏）
  用户的触摸点太多，超过了支持的上限（自动取消早先的触摸点）