触摸

[TOC] ## 触摸 ### 触摸事件 * `touchstart`：用户开始触摸时触发，它的`target`属性返回发生触摸的元素节点。 * `touchend`：用户不再接触触摸屏时（或者移出屏幕边缘时）触发，它的`target`属性与`touchstart`事件一致的，就是开始触摸时所在的元素节点。它的`changedTouches`属性返回一个`TouchList`实例，包含所有不再触摸的触摸点（即`Touch`实例对象）。 * `touchmove`：用户移动触摸点时触发，它的`target`属性与`touchstart`事件一致。如果触摸的半径、角度、力度发生变化，也会触发该事件。 * `touchcancel`：触摸点取消时触发，比如在触摸区域跳出一个模态窗口（modal window）、触摸点离开了文档区域（进入浏览器菜单栏）、用户的触摸点太多，超过了支持的上限（自动取消早先的触摸点）。 ### 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`代表没有压力，`1`代表硬件所能识别的最大压力，默认为`0`。 #### Touch.identifier 其他类似 选取一个讲解 ``` someElement.addEventListener('touchmove', function (e) { for (var i = 0; i < e.changedTouches.length; i++) { console.log(e.changedTouches[i].identifier); } }, false); ``` ### TouchList 接口 成员是`Touch`的实例对 ``` div.addEventListener('touchstart', rotate); function rotate(e) { alert(e.targetTouches); //targetTouches与changedTouches 都是TouchList alert(e.changedTouches); }; ``` ### TouchEvent 接口 * `touches`：`TouchList`实例，代表所有的当前处于活跃状态的触摸点，默认值是一个空数组`[]`。 * `targetTouches`：`TouchList`实例，代表所有处在触摸的目标元素节点内部、且仍然处于活动状态的触摸点，默认值是一个空数组`[]`。 * `changedTouches`：`TouchList`实例，代表本次触摸事件的相关触摸点，默认值是一个空数组`[]`。 * `ctrlKey`：布尔值，表示 Ctrl 键是否同时按下，默认值为`false`。 * `shiftKey`：布尔值，表示 Shift 键是否同时按下，默认值为`false`。 * `altKey`：布尔值，表示 Alt 键是否同时按下，默认值为`false`。 * `metaKey`：布尔值，表示 Meta 键（或 Windows 键）是否同时按下，默认值为`false`。 #### TouchEvent.touches 处于活动的触摸点,返回数组 ``` 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); ```