touch事件中的touches、targetTouches和changedTouches(詳解)
阿新 • • 發佈:2019-02-02
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() }