移動的 touch事件中的touches、targetTouches和changedTouches

標籤：function   屬性   通過   有一個   hang   def   touch   元素   start   

touches: 當前螢幕上所有觸摸點的列表;

targetTouches: 當前對象上所有觸摸點的列表;

changedTouches: 涉及當前(引發)事件的觸摸點的列表

通過一個例子來區分一下觸摸事件中的這三個屬性：

1. 用一個手指接觸螢幕，觸發事件，此時這三個屬性有相同的值。

2. 用第二個手指接觸螢幕，此時，touches有兩個元素，每個手指觸摸點為一個值。當兩個手指觸摸相同元素時，
targetTouches和touches的值相同，否則targetTouches 只有一個值。changedTouches此時只有一個值，
為第二個手指的觸摸點，因為第二個手指是引發事件的原因

3. 用兩個手指同時接觸螢幕，此時changedTouches有兩個值，每一個手指的觸摸點都有一個值

4. 手指滑動時，三個值都會發生變化

5. 一個手指離開螢幕，touches和targetTouches中對應的元素會同時移除，而changedTouches仍然會存在元素。

6. 手指都離開螢幕之後，touches和targetTouches中將不會再有值，changedTouches還會有一個值，
此值為最後一個離開螢幕的手指的接觸點。

2. 觸點座標選取

touchstart和touchmove使用: e.targetTouches[0].pageX 或 (jquery)e.originalEvent.targetTouches[0].pageX

touchend使用: e.changedTouches[0].pageX 或 (jquery)e.originalEvent.changedTouches[0].pageX

3.touchmove事件對象的擷取

想要在touchmove:function(e,參數一)加一個參數，結果直接使用e.preventDefault()就會 e 報錯，處理方法為使用arguments[0]擷取event參數
touchmove:function(e,參數一){
　　var e=arguments[0]
　　e.preventDefault()
}

 

移動的 touch事件中的touches、targetTouches和changedTouches