移動端touch事件的使用

標籤：web

一、支援webkit的touch事件

pc上的web頁面滑鼠會產生 iphone、ipod  Touch、ipad上的web頁面觸屏時會產生ontouchstart、ontouchmove、ontouchend、ontouchcancel 事件，分別對應了觸屏開始、拖拽及完成觸屏事件和取消。

1、touchstart——當手指觸碰螢幕時候發生。不管當前有多少只手指

2、touchmove——當手指在螢幕上滑動時連續觸發。通常我們再滑屏頁面，會調用event的preventDefault()可以阻止預設情況的發生：阻止頁面滾動

3、touchend——當手指離開螢幕時觸發

4、touchcancel——系統停止跟蹤觸摸時候會觸發。例如在觸摸過程中突然頁面alert()一個提示框，此時會觸發該事件，這個事件比較少用

 

二、每個觸摸事件都包括了三個觸摸列表

1、touches：當前位於螢幕上的所有手指的一個列表。

2、 targetTouches：位於當前DOM元素上的手指的一個列表。

3、changedTouches：涉及當前事件的手指的一個列表。

 

三、這些列表由包含了觸摸資訊的對象組成

1、 identifier：一個數值，唯一標識觸摸會話（touch session）中的當前手指。
2、target：DOM元素，是動作所針對的目標。
3、客戶/頁面/螢幕座標：動作在螢幕上發生的位置。
4、半徑座標和 rotationAngle：畫出大約相當於手指形狀的橢圓形。

 

四、Touch事件與Mouse事件的關係

 

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

 

五、支援winphone 8的touch事件

1、MSPointerDown——當手指觸碰螢幕時候發生。不管當前有多少只手指

2、MSPointerMove——當手指在螢幕上滑動時連續觸發。通常我們再滑屏頁面，會調用css的html{-ms-touch-action: none;}可以阻止預設情況的發生：阻止頁面滾動

3、MSPointerUp——當手指離開螢幕時觸發

參考資料：  移動端touch事件   http://www.studyofnet.com/news/849.html

本文出自 “學習也休閑” 部落格，請務必保留此出處http://studyofnet.blog.51cto.com/8142094/1681531

移動端touch事件的使用