Touch事件

touth事件中的touchs,targetTouches ,changedTouches詳解

touchs:當(dāng)前屏幕上所有觸摸點(diǎn)的列表
targetTouches:當(dāng)前對(duì)象上所有觸摸點(diǎn)的列表
changedTouches:涉及當(dāng)前(引發(fā))事件的觸摸點(diǎn)的列表

通過(guò)一個(gè)例子來(lái)區(qū)分一下觸摸事件中的這三個(gè)屬性:

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

2:用第二個(gè)手指接觸屏幕,此時(shí),touches有兩個(gè)元素,每個(gè)手指觸摸點(diǎn)為一個(gè)值。當(dāng)兩個(gè)手指觸摸相同元素時(shí),
targetTouches和touches的值相同,否則targetTouches 只有一個(gè)值。changedTouches此時(shí)只有一個(gè)值,
為第二個(gè)手指的觸摸點(diǎn),因?yàn)榈诙€(gè)手指是引發(fā)事件的原因

3: 用兩個(gè)手指同時(shí)接觸屏幕,此時(shí)changedTouches有兩個(gè)值,每一個(gè)手指的觸摸點(diǎn)都有一個(gè)值

4:手指滑動(dòng)時(shí),三個(gè)值都會(huì)發(fā)生變化

5: 一個(gè)手指離開(kāi)屏幕,touches和targetTouches中對(duì)應(yīng)的元素會(huì)同時(shí)移除,而changedTouches仍然會(huì)存在元素。

6: 手指都離開(kāi)屏幕之后,touches和targetTouches中將不會(huì)再有值,changedTouches還會(huì)有一個(gè)值,
此值為最后一個(gè)離開(kāi)屏幕的手指的接觸點(diǎn)。

. 觸點(diǎn)坐標(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

touchmove事件對(duì)象的獲取

想要在touchmove:function(e,參數(shù)一)加一個(gè)參數(shù),結(jié)果直接使用e.preventDefault()就會(huì) e 報(bào)錯(cuò),處理方法為使用arguments[0]獲取event參數(shù)
touchmove:function(e,參數(shù)一){
  var e=arguments[0]
  e.preventDefault()
}

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

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

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