(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);
      };
  };