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：畫出大約相當於手指形狀的橢圓形，分別為橢圓形的兩個半徑和旋轉角度。

不經常用支持性也不好。