1、触摸操作概述

• Touch：一个触摸点

• TouchList：多个触摸点的集合

• TouchEvent：触摸引发的事件实例

2、Touch 接口

2.1、Touch 接口概述

var touch = new Touch(touchOptions);

• 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代表没有压力，1代表硬件所能识别的最大压力，默认为0。

2.2、Touch 接口的实例属性

someElement.addEventListener('touchmove', function (e) {  for (var i = 0; i < e.changedTouches.length; i++) {    console.log(e.changedTouches[i].identifier);  }}, false);

div.addEventListener('touchstart', rotate);div.addEventListener('touchmove', rotate);div.addEventListener('touchend', rotate);function rotate(e) {  var touch = e.changedTouches.item(0);  e.preventDefault();  src.style.width = touch.radiusX * 2 + 'px';  src.style.height = touch.radiusY * 2 + 'px';  src.style.transform = 'rotate(' + touch.rotationAngle + 'deg)';};

3、TouchList 接口

• TouchList.length：数值，表示成员数量（即触摸点的数量）。

• TouchList.item()：返回指定位置的成员，它的参数是该成员的位置编号（从零开始）。

4、TouchEvent 接口

4.1、概述

new TouchEvent(type, options)

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

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

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

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

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

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

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

4.2、实例属性

• TouchEvent.altKey：布尔值，表示触摸时是否按下了 Alt 键。

• TouchEvent.ctrlKey：布尔值，表示触摸时是否按下了 Ctrl 键。

• TouchEvent.shiftKey：布尔值：表示触摸时是否按下了 Shift 键。

• TouchEvent.metaKey：布尔值，表示触摸时是否按下了 Meta 键（或 Windows 键）。

someElement.addEventListener('touchstart', function (e) {  console.log('altKey = ' + e.altKey);  console.log('ctrlKey = ' + e.ctrlKey);  console.log('metaKey = ' + e.metaKey);  console.log('shiftKey = ' + e.shiftKey);}, false);

• touchstart事件：被激活的触摸点

• touchmove事件：发生变化的触摸点

• touchend事件：消失的触摸点（即不再被触碰的点）

someElement.addEventListener('touchmove', function (e) {  for (var i = 0; i < e.changedTouches.length; i++) {    console.log(e.changedTouches[i].identifier);  }}, false);

someElement.addEventListener('touchstart', function (e) {  switch (e.touches.length) {    // 一根手指触摸    case 1: handle_one_touch(e); break;    // 两根手指触摸    case 2: handle_two_touches(e); break;    // 三根手指触摸    case 3: handle_three_touches(e); break;    // 其他情况    default: console.log('Not supported'); break;  }}, false);

function touches_in_target(ev) {  return (ev.touches.length === ev.targetTouches.length ? true : false);}

5、触摸事件的种类

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

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

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

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

var el = document.getElementsByTagName('canvas')[0];el.addEventListener('touchstart', handleStart, false);el.addEventListener('touchmove', handleMove, false);function handleStart(evt) {  evt.preventDefault();  var touches = evt.changedTouches;  for (var i = 0; i < touches.length; i++) {    console.log(touches[i].pageX, touches[i].pageY);  }}function handleMove(evt) {  evt.preventDefault();  var touches = evt.changedTouches;  for (var i = 0; i < touches.length; i++) {    var touch = touches[i];    console.log(touch.pageX, touch.pageY);  }}