[文章內容簡(jiǎn)介]：移動(dòng)端 觸摸事件簡(jiǎn)介

 

ontouchstart、ontouchmove、ontouchend、ontouchcancel

在手機端頁(yè)面開(kāi)發(fā)時(shí)，大部分會(huì )需要實(shí)現移動(dòng)端手機觸發(fā)事件的使用。  

其中touch事件touch是針對觸屏手機上的觸摸事件?，F今大多數觸屏手機webkit內核提供了touch事件的監聽(tīng)，讓開(kāi)發(fā)者可以獲取用戶(hù)觸摸屏幕時(shí)的一些信息。

其中包括：touchstart,touchmove,touchend,touchcancel 這四個(gè)事件。 

touch事件就是其字面直譯“觸摸”。所以只要手指接觸到屏幕并不需要滑動(dòng)就會(huì )觸發(fā)相關(guān)的事件

1、Touch事件簡(jiǎn)介

pc上的web頁(yè)面鼠標會(huì )產(chǎn)生onmousedown、onmouseup、onmouseout、onmouseover、onmousemove的事件，但是在移動(dòng)終端如 iphone、ipod  Touch、ipad上的web頁(yè)面觸屏時(shí)會(huì )產(chǎn)生ontouchstart、ontouchmove、ontouchend、ontouchcancel 事件，分別對應了觸屏開(kāi)始、拖拽及完成觸屏事件和取消。

在touch事件中三個(gè)主要動(dòng)作：

觸發(fā)touchstart：：觸摸開(kāi)始的時(shí)候觸發(fā)，即手指接觸到屏幕就觸發(fā)了；

觸發(fā)touchmove：手指在屏幕上滑動(dòng)的時(shí)候觸發(fā)；

觸發(fā)touchend：觸摸結束的時(shí)候觸發(fā)，即手指離開(kāi)屏幕時(shí)觸發(fā)；

當一些更高級別的事件發(fā)生的時(shí)候（如電話(huà)接入或者彈出信息）會(huì )取消當前的touch操作，即觸發(fā)ontouchcancel。一般會(huì )在ontouchcancel時(shí)暫停游戲、存檔等操作。

 

2、事件綁定：

banner.addEventListener('touchstart', touchStart, false);

banner.addEventListener('touchmove', touchMove, false);

banner.addEventListener('touchend', touchEnd, false);

事件綁定中需要注意的是：jquery庫的bind方法會(huì )出現綁定無(wú)效的問(wèn)題，有的jquery版本是可以的。

函數定義中需要注意的是在touchmove中瀏覽器的默認事件是移動(dòng)頁(yè)面，比如上下滾動(dòng)，在touchmove中需要禁止瀏覽器的默認動(dòng)作，否則會(huì )影響到touchmove的觸發(fā)，尤其是在android中，iphone對這個(gè)處理的較好，影響較小。touchmove是一個(gè)會(huì )在move

 

3、Touch事件與Mouse事件的出發(fā)關(guān)系

在觸屏操作后，手指提起的一剎那（即發(fā)生ontouchend后），系統會(huì )判斷接收到事件的element的內容是否被改變，如果內容被改變，接下來(lái)的事 件都不會(huì )觸發(fā)，如果沒(méi)有改變，會(huì )按照mousedown，mouseup，click的順序觸發(fā)事件。特別需要提到的是，只有再觸發(fā)一個(gè)觸屏事件時(shí)，才會(huì ) 觸發(fā)上一個(gè)事件的mouseout事件。

 

捕獲觸摸點(diǎn)位置：

在觸摸事件中捕獲到事件e,e會(huì )有一個(gè)屬性touches，e.touches表示的在屏幕上所有的觸摸點(diǎn)，但事實(shí)上，絕大數手機瀏覽器并不支持多點(diǎn)觸摸，所有用e.touchees[0]捕獲一個(gè)觸點(diǎn)就知足吧，不要再奢望獲取e.touches[>0]了，這個(gè)觸點(diǎn)的位置可以有e.touches[0].pageX獲取頁(yè)面x坐標（像素）；