js 触摸的Event--获取触摸位置

继上一篇js原生拖拽之后，现在又来写一下移动端touch列表，获取触摸位置。pc端的event事件，鼠标的位置信息在上一篇，点此进入上一篇。

touch有3个事件：touchstart，touchmove，touchend，移动端不能用click，这涉及到click的300ms的延迟问题。但是又没有原生的tap，所以zepto的touch库一直被用。。还有左滑，右滑屏幕，都是不错的。

例子和上一篇的一样：

<div id="drag"></div>

*{margin: 0;padding: 0}
#drag{
position: absolute;
top: 100px;
left: 200px;
width: 60px;height: 60px;
background-color: red;
}

接下来是它的event事件，只截了touch列表的部分：







每个事件都有的touches---touch列表，储存着触摸点的信息。

targetTouches---位于当前DOM元素上手指的列表。 所以都用event.targetTouches.length判断屏幕上手指个数。

　　　　　　 changedTouches---涉及当前事件手指的列表。

而每个列表呢，都包含identifier---一个数值，唯一标识触摸会话（touch session）中的当前手指。一般为从0开始的流水号

target---该触发事件的元素

接下来就是我们的位置重头戏了：同样我点击的中间最上的位置。按理说应该是

clientX/Y:跟pc一样，据此页面的距离，相当于pc的鼠标坐标。这里是触摸点。相对于视口

screenX/Y：相对于屏幕的触摸点的位置。也是跟pc的同名属性一样。

pageX/Y：跟clientX/Y相似。相对于页面。按理说有滚动条的情况下，pageX是大于clientX的，但是chrome上面都是一样的，chrome PC版的没有问题。

还有

radiusX

/

radiusY/

rotationAngle：画出大约相当于手指形状的椭圆形，分别为椭圆形的两个半径和旋转角度。

不经常用支持性也不好。