關於js touch事件 的引用設置

一開始作前端頁面的時候，接觸的也是js，可是隨後便被簡單高效的jquery吸引過去，並一直使用至今。

而js，則被我主觀的認爲底層技術而拋棄。

直到這幾天工做須要，研究移動端頁面的觸屏滑動事件，搜索jquery 的相應技術支持實在繁瑣（固然也多是我對jquery的理解不夠），而js只需幾步簡單定義便可。

因爲對js的瞭解比較少，最簡單的應用我都試了好久……下面就分享下js的touch事件的實際引用：

1 $(function(){
2     document.addEventListener("touchmove", _touch, false);
3 })
4 
5 function _touch(event){
6     alert(1);
7 }

以上代碼不可避免的使用了jquery的某些東西，不使用jquery的能夠忽略之。

相應的事件有：

touchstart:當手指觸摸屏幕時觸發；即便已經有一個手指放在了屏幕上也會觸發。

touchmove:當手指在屏幕上滑動時連續的觸發。在這個事件發生期間，調用preventDefault()可阻止滾動。

touchend:當手指從屏幕上移開時觸發。

touchcancel:當系統中止跟蹤觸摸時觸發。關於此事件的確切觸發事件，文檔中沒有明確說明。

 

以上事件的event對象上面都存在以下屬性：

touches:表示當前跟蹤的觸摸操做的Touch對象的數組。

targetTouches:特定於事件目標的Touch對象的數組。

changeTouches:表示自上次觸摸以來發生了什麼改變的Touch對象的數組。

 

每一個Touch對象包含下列屬性：

clientX:觸摸目標在視口中的X座標。

clientY:觸摸目標在視口中的Y座標。

identifier：表示觸摸的惟一ID。

pageX：觸摸目標在頁面中的x座標。

pageY：觸摸目標在頁面中的y座標。

screenX:觸摸目標在屏幕中的x座標。

screenY:觸摸目標在屏幕中的y座標。

target:觸摸的DOM節點座標

 

 

好吧，我其實也剛開始學，反正先把一些百度來的屬性記下來再說。

 

模版世界:http://www.templatesy.com