移动端touch事件和事件参数详解

什么是touch事件

　　touch事件是移动端触屏设备上的事件，当用户触摸屏幕及进行一系列操作时发生的事件。 包含touchstart, touchmove, touchend事件。

 

touch事件模式

　　touch事件同其他dom事件一样（因为本身就属于dom事件，只不过用在触屏设备的新增html5事件），用 addEventListener绑定，在事件处理时使用e.prevantDefault()来阻止默认事件执行（例如你在滚动div时，使用它来阻止 页面滚动），使用e.stopPropagation()来阻止事件向上冒泡，等等。

触发事件时参数对象event属性

　　touchList：touch类对象组成的数组 touch对象:touch对象表示一个触点，触点属性包含identifier, target, clientX/clientY, pageX/pageY, screenX/screenY, force（接触面最小椭圆角度）/radiusX（接触面最小椭圆X轴）/radiusY（接触面最小椭圆Y轴） /rotationAngle(chrome上目前还是带有webkit前缀的webkitForce(压力)/webkitRadiusX /webkitRadiusY/webkitRotationAngle), 其中identifier用来标识该触点，因为屏幕上可能同时存在多个触点。

changedTouches/touches/targetTouches

touches：为屏幕上所有手指的信息

PS：因为手机屏幕支持多点触屏，所以这里的参数就与手机有所不同

targetTouches：手指在目标区域的手指信息

changedTouches：最近一次触发该事件的手指信息

比如两个手指同时触发事件，2个手指都在区域内，则容量为2，如果是先后离开的的话，就会先触发一次再触发一次，这里的length就是1，只统计最新的

PS：一般changedTouches的length都是1

touchend时，touches与targetTouches信息会被删除，changedTouches保存的最后一次的信息，最好用于计算手指信息

这里要使用哪个数据各位自己看着办吧，我也不是十分清晰（我这里还是使用changedTouches吧）

以上就是mouse与touch主要不同点，但这些并不是太影响我们的操作，因为到现在为止，我们一般还是使用的是单击

事件解析

touchstart事件

1、发生条件：当用户触摸到屏幕时，发生touchstart事件。

实验：

• 一根手指触摸屏幕： 此时触发一个touchstart事件
• 两根手指触摸屏幕： 先后发生两个touchstart事件 summary：touchstart是按触摸点（严格说应该是分离的两个触摸点）来定义的。（关于触发原理，这里是臆想而已，这个问题已在知乎上提问，届时更新）

2、属性解析

• changedTouches属性： 一个touchList数组，表示该事件发生时发生改变的触点，一般都是该触点本身。
  此时来说说indetifier这个属性吧：
  实验：
  1、一根手指Fa触发touchstart，该对象的identifier为0；
  2、放上手指Fb, 此时触发第二个touchstart事件，identifier为1；
  3、再放上Fc，此时触发第三个touchstart事件，identifier为2；
  4、再放上Fd，此时触发第四个touchstart事件，identifier为3；
  5、此时把Fa抬起，放上Fe, 此时触发第五的touchstart事件，identifier为0；
  6、此时把Fd抬起，放上Ff，此时触发第六个tounchstart事件，identifier为3；
  summary:标识会自动填上从0开始且不存在的identifier，所以以indentifier来标识触摸点时要注意这一点。

• touches属性：
  一 个 TouchList 对象，包含了所有当前接触触摸平面的触点的 Touch 对象，无论它们的起始于哪个element 上，也无论它们状态是否发生了变化。【摘自https://developer.mozilla.org】

• targetTouches属性：
  一个 TouchList 对象，是包含了如下触点的 Touch 对象：触摸起始于当前事件的目标 element 上，并且仍然没有离开触摸平面的触点.【摘自https://developer.mozilla.org】
  targetTouches和touches联合起来做一个实验：
  1、在div#test上绑定touchstart事件；
  2、Fa放置在div#test, 触发一次touchstart；
  3、Fb放置在div#test以外的body上；
  4、Fc触发一次div#test上的触屏并立即抬起；
  5、Fd触发一次div#test上的touchstart；
  现象：此时我们观察两个Fa触发的touchstart事件对象和Fd触发的touchstart事件对象：
  Fa的touchstart中touches和targetTouches对象都仅仅包含一个touch对象，对应Fa的触摸点。
  Fd的touchstart中touches和targetTouches对象是一样的，包含两个touch对象，分别是Fa和Fd对应的触摸点。

touchmove事件

当触摸点在触摸平面上移动时，触发touchmove事件。
实验：
* 再次拿出touch对象，但这时我们实验一下touch对象的target属性：
简单地让Fa从div#test滑出到body区域
过程中我们记录了touchmove事件，为简单起见，我们查看最后一个touchmove的事件对象，我们发现：
现象：此时的changedTouches中的touch对象的target为div#test，所以target属性指的是触发事件时所在的元素；
我们在此又发现一个现象：
从始至终，这一系列的touchmove事件都会触发div#test上的touchmove事件回调；

• 旨在观察当move过程中删除div#test的情况。代码如下：

  var test=document.getElementById('test');
  window.addEventListener('touchmove',function(e){
    console.log('move on the window');
    console.log(e);
  },false);
  test.addEventListener('touchmove',function(e){
    e.preventDefault();
    //e.stopPropagation();
    console.log('move on the test');
    console.log(e);
    if(e.changedTouches[0].clientY>420){
      //因为该测试中div#test的高度为400px且起点为(0,0)
      if(test.parentNode){
        test.parentNode.removeChild(test);
        console.log('remove')
      }
    }
  },false);

我们依然简单地让Fa从div#test滑出到body区域。

现象：在控制台上可以看出：

当div#test被删除后，只执行了div#test上的touchmove, 但已经不再冒泡到window。

注意：remove打印出来之前，事件已经冒泡到了window，所以随后有一个window的touchend的回调被执行。

touchend事件

当触摸点离开屏幕时触发touchend事件。 实验： * 在div#test上触屏后离开，触点无移动

现象：触发div#test的touchend事件 * 在div#test上滑动，且过程中没有离开div#test 现象：不会触发touchend事件 * 在div#test上滑动，且最终停止到body上并抬起手指

现象：不会触发touchend事件

来源：http://sentsin.com/web/1110.html