1. 程式人生 > >html5(移動端)觸控點位置獲取

html5(移動端)觸控點位置獲取

在移動端使用html5的觸屏事件主要就是為了解決靈敏度的問題傳統的js或者jquery有的時候在移動端靈敏度是不行的。
-------------------------
主要是三個事件:touchstart、touchmove、touchend
touchstart:手指頭觸控式螢幕幕上的事件
touchmove:手指頭在螢幕上滑動觸發的事件
touchend:當手指從螢幕上離開的時候觸發
利用jquery配合使用方法如下:
$("#demoid").bind('touchstart',function(){ //程式碼處理});
---------在移動端用到最多的出就是觸碰點的獲取我們就講講觸碰點問題:
那麼先說明pc端,在pc端直接使用e.pageX和e.pageY進行獲取就完全ok了但是
在移動端是無法識別這個東西的,而且在不同的事件下獲取滑鼠的觸碰點還是
不同的,下面詳細介紹在touchstart、touchmove、touchend三種事件下的滑鼠
位置點獲取:
(1)touchstart事件下獲取:e.originalEvent.targetTouches[0].pageX
說明:由於手指頭是多點觸控到螢幕上的我們所以e.originalEvent.targetTouches的
意思是一個手指觸碰點集合我們只需要獲取第一個點就可以了所以
e.originalEvent.targetTouches[0],所以位置.pageX .pageY就ok了
(2)touchmove事件獲取:這個和(1)的獲取方式是一樣的就不多說了
(3)touchend事件的獲取:e3.originalEvent.changedTouches[0].pageX 
下面是其他的一些介紹:
每個Touch物件包含的屬性如下。
clientX:觸控目標在視口中的x座標。
clientY:觸控目標在視口中的y座標。
identifier:標識觸控的唯一ID。
pageX:觸控目標在頁面中的x座標。
pageY:觸控目標在頁面中的y座標。
screenX:觸控目標在螢幕中的x座標。
screenY:觸控目標在螢幕中的y座標。
target:觸目的DOM節點目標。