(97)Wangdao.com_第三十天_触摸事件
触摸事件
只有触摸屏才会引发这一类事件
触摸事件 和 鼠标事件 同时触发，即使这个时候并没有用到鼠标。
这是为了让那些只定义鼠标事件、没有定义触摸事件的代码，在触摸屏的情况下仍然能用。
如果想避免这种情况，可以用 event.preventDefault 方法阻止发出鼠标事件
Touch 一个触摸点
TouchList 多个触摸点的集合
TouchEvent 触摸引发的事件实例
- 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
- Touch 接口的实例属性 var touch = e.changedTouches.item(0);
touch.identifier
返回一个整数，表示触摸点的唯一 ID。
这个值在整个触摸过程保持不变，直到触摸事件结束。
touch.force
返回一个0到1之间的数值，表示触摸压力。
0代表没有压力，1代表硬件所能识别的最大压力。
touch.target
返回一个元素节点，代表触摸发生时所在的那个元素节点。
即使触摸点已经离开了这个节点，该属性依然不变。
touch.screenX，touch.screenY
相当于屏幕左上角
touch.clientX，touch.clientY
相当于浏览器窗口左上角
touch.pageX，touch.pageY
相当于整个网页左上角
touch.radiusX，touch.radiusY
返回触摸点周围受到影响的椭圆范围的 X 轴半径和 Y 轴半径，单位为像素。
乘以 2 就可以得到触摸范围的宽度和高度
touch.rotationAngle
表示触摸区域的椭圆的旋转角度，单位为度数，在0到90度之间
- 精准描述 手指触屏 的椭圆区域
-
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)'; }; - TouchList 接口
表示一组触摸点的集合。表示所有触摸点
它的实例是一个类似数组的对象，成员是 Touch 的实例对象
用户用三根手指触摸，产生的 TouchList 实例就会包含三个成员，每根手指的触摸点对应一个 Touch 实例对象
主要通过触摸事件的 event.touches、event.changedTouches、event.targetTouches 这几个属性获取
- 实例属性
event.touches.length
触摸点的数量
- 实例方法
event.touches.item() 指定位置的成员，它的参数是该成员的位置编号（从零开始）
event.touches.item(0); 等同于 event.touches[0];
- 浏览器原生提供 TouchEvent() 构造函数，用来生成触摸事件的实例。除了被继承的属性以外，它还有一些自己的属性。
-
var touchEvent = new TouchEvent(type, options);
第一个参数 是字符串，表示事件类型；
第二个参数是事件的配置对象，该参数是可选的，对象的所有属性也是可选的。
除了 Event 接口的配置属性，该接口还有一些自己的配置属性。
touches TouchList 实例 代表屏幕上所有的的手指列表，默认值是一个空数组[]。
targetTouches TouchList 实例 代表所有处在目标元素上的手指列表，默认值是一个空数组[]。
changedTouches TouchList 实例 代表所有处目标元素 目标事件 上的手指列表 ，默认值是一个空数组[]。
ctrlKey 布尔值 表示 Ctrl 键是否同时按下，默认值为false。
shiftKey 布尔值 表示 Shift 键是否同时按下，默认值为false。
altKey 布尔值 表示 Alt 键是否同时按下，默认值为false。
metaKey 布尔值 表示 Meta 键（或 Windows 键）是否同时按下，默认值为false。
- 触摸事件的种类 event.type
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); }; };
