touch事件中的touches、targetTouches和changedTouches詳解

touches: 當(dāng)前屏幕上所有觸摸點的列表;

targetTouches: 當(dāng)前對象上所有觸摸點的列表;

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

通過一個例子來區(qū)分一下觸摸事件中的這三個屬性:

  1. 用一個手指接觸屏幕,觸發(fā)事件,此時這三個屬性有相同的值。

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

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

  4. 手指滑動時,三個值都會發(fā)生變化

  5. 一個手指離開屏幕,touches和targetTouches中對應(yīng)的元素會同時移除,而changedTouches仍然會存在元素。

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

  7. 觸點坐標(biāo)選取

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,參數(shù)一)加一個參數(shù),結(jié)果直接使用e.preventDefault()就會 e 報錯,處理方法為使用arguments[0]獲取event參數(shù)
touchmove:function(e,參數(shù)一){
  var e=arguments[0]
  e.preventDefault()
}

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容