[文章內容簡介]：移動端 觸摸事件簡介

 

ontouchstart、ontouchmove,、ontouchend,、ontouchcancel

在手機端頁面開發(fā)時，大部分會需要實現(xiàn)移動端手機觸發(fā)事件的使用,。  

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

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

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

1,、Touch事件簡介

pc上的web頁面鼠標會產生onmousedown,、onmouseup、onmouseout,、onmouseover,、onmousemove的事件，但是在移動終端如 iphone,、ipod  Touch,、ipad上的web頁面觸屏時會產生ontouchstart、ontouchmove,、ontouchend,、ontouchcancel 事件,，分別對應了觸屏開始、拖拽及完成觸屏事件和取消,。

在touch事件中三個主要動作：

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

觸發(fā)touchmove：手指在屏幕上滑動的時候觸發(fā),；

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

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

 

2,、事件綁定：

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

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

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

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

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

 

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

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

 

捕獲觸摸點位置：

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