1.觸摸事件
1.三個(gè)觸摸事件:
1.touchsatrt 當(dāng)手指觸摸屏幕的時(shí)候觸發(fā)
2.touchmove 當(dāng)手指在屏幕上滑動(dòng)的時(shí)候連續(xù)觸發(fā) /
3.touchend 當(dāng)手指離開的時(shí)候觸發(fā)*/
2.添加事件方式
dom.addEventListener('touchstart',function(e){});
3.事件下ev相關(guān)的屬性
截圖20170210111653.png
4.事件返回的e對(duì)象包含那些移動(dòng)端特有的屬性:
changedTouches: 頁(yè)面上最新更改的所有觸摸 他是一個(gè)數(shù)組長(zhǎng)度為一如果有無(wú)數(shù)個(gè)同時(shí)點(diǎn)他就會(huì)為2,3,4.。。。。。。。
targetTouches: 目標(biāo)元素的所有當(dāng)前觸摸 只會(huì)包含目標(biāo)元素之內(nèi)的觸摸點(diǎn)集合,之外的就不會(huì)包含在內(nèi)了
touches: 頁(yè)面上的所有觸摸 包含目標(biāo)元素內(nèi)的和目標(biāo)元素之外的
touchmove:當(dāng)手指在屏幕上滑動(dòng)時(shí)連續(xù)觸發(fā)。
touchend:當(dāng)手指離開屏幕時(shí)觸發(fā)。他只會(huì)記錄頁(yè)面上最新更改的所有觸摸也就是changedTouches
5. e.touches[0] 的重要坐標(biāo)
截圖20170210113122.png
注意:在touchend事件的時(shí)候event只會(huì)記錄changedtouches
clientX:觸摸目標(biāo)在視口中的X坐標(biāo)。(常用)
clientY:觸摸目標(biāo)在視口中的Y坐標(biāo)。(常用)
pageX :觸摸目標(biāo)在頁(yè)面中的x坐標(biāo)。
pageY :觸摸目標(biāo)在頁(yè)面中的y坐標(biāo)。
screenX:觸摸目標(biāo)在屏幕中的x坐標(biāo)。(不常用)
screenY:觸摸目標(biāo)在屏幕中的y坐標(biāo)。(不常用)
2.過(guò)渡事件和動(dòng)畫事件
obj.addEventListener('transitionStart',function(e){});
//兼容性問(wèn)題
obj.addEventListener('webkitTransitionEnd',function(e){});
obj.addEventListener('transitionEnd',function(e){});
obj.addEventListener('animationStart',function(e){});
//兼容性問(wèn)題
obj.addEventListener('webkitAnimationStart',function(e){});
obj.addEventListener('animationEnd',function(e){});