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è)屬性:
- 用一個(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()
}