移動端touch觸屏滑動事件、滑動觸屏事件監聽！

移動端touch觸屏滑動事件、滑動觸屏事件監聽！

 

1、觸摸事件

ontouchstart、ontouchmove、ontouchend、ontouchcancel

目前移動端瀏覽器均支持這4個觸摸事件，包括IE。因爲觸屏也支持MouseEvent，所以他們的順序是須要注意的：touchstart → mouseover → mousemove → mousedown → mouseup → click1

Apple在iOS 2.0中引入了觸摸事件API，Android正迎頭遇上這一事實標準，縮小差距。最近一個W3C工做組正協力制定這一觸摸事件規範。

2、規範

這裏咱們介紹幾種普及得比較好的觸摸事件，你能夠在絕大多數現代瀏覽器中來測試這一事件（必須是觸屏設備哦）：

touchstart：觸摸開始的時候觸發

touchmove：手指在屏幕上滑動的時候觸發

touchend：觸摸結束的時候觸發

而每一個觸摸事件都包括了三個觸摸列表，每一個列表裏包含了對應的一系列觸摸點（用來實現多點觸控）：

touches：當前位於屏幕上的全部手指的列表。

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

changedTouches：涉及當前事件手指的列表。

每一個觸摸點由包含了以下觸摸信息（經常使用）：

identifier：一個數值，惟一標識觸摸會話（touch session）中的當前手指。通常爲從0開始的流水號（android4.1，uc）

target：DOM元素，是動做所針對的目標。

pageX/pageX/clientX/clientY/screenX/screenY：一個數值，動做在屏幕上發生的位置（page包含滾動距離,client不包含滾動距離，screen則以屏幕爲基準）。　

radiusX/radiusY/rotationAngle：畫出大約至關於手指形狀的橢圓形，分別爲橢圓形的兩個半徑和旋轉角度。初步測試瀏覽器不支持，好在功能不經常使用，歡迎你們反饋。

有了這些信息，咱們就能夠依據這些事件信息爲用戶提供不一樣的反饋了。

下面，我將爲你們展現一個小demo，用touchmove實現的單指拖動:

/**
 * onTouchEvent
 */
var div = document.getElementById("div");
//touchstart相似mousedown
div.ontouchstart = function(e){
   //事件的touches屬性是一個數組，其中一個元素表明同一時刻的一個觸控點，從而能夠經過touches獲取多點觸控的每一個觸控點
   //因爲咱們只有一點觸控，因此直接指向[0]
   var touch = e.touches[0];
   //獲取當前觸控點的座標，等同於MouseEvent事件的clientX/clientY
   var x = touch.clientX;
   var y = touch.clientY;
};
//touchmove相似mousemove
div.ontouchmove = function(e){
   //可爲touchstart、touchmove事件加上preventDefault從而阻止觸摸時瀏覽器的縮放、滾動條滾動等
   e.preventDefault();
};
//touchend相似mouseup
div.ontouchup = function(e){
   //nothing to do
};

 

3、手勢事件

       手勢是指利用多點觸控進行旋轉、拉伸等操做，例如圖片、網頁的放大、旋轉。須要兩個或以上的手指同時觸摸時纔會觸發手勢事件。關於縮放咱們須要注意的一點 是元素的位置座標：咱們一般使用offsetX、getBoundingClientRect等方法獲取元素的位置座標，但在手機瀏覽器中頁面常常會在使 用中被縮放，那縮放後的元素座標會改變嗎？答案是有所差別。用一個情景來講明這個問題：頁面A加載完成後，JavaScript獲 取到該元素在document中的座標爲(100,100)，接着用戶放大了頁面，此時用JavaScript再次輸出元素座標，依然仍是 (100,100)，但該元素在屏幕上的響應區域會根據縮放比例產生偏移。你能夠打開那個打磚塊遊戲demo，等頁面徹底加載完成後，再放大，此時你會發 現即便手指觸摸在「touch here」區域外部，也能夠控制到球板，由於區域發生了偏移。除非頁面刷新或者恢復縮放，不然偏移量將一直存在。

/**
 * onGestureEvent
 */
var div = document.getElementById("div");
div.ongesturechange = function(e){
   //scale表明手勢產生的縮放比例，小於1是縮小，大於1是放大，原始爲1
   var scale = e.scale;
   //rotation表明旋轉手勢的角度，值區間[0,360]，正值順時針旋轉，負值逆時針
   var angle = e.rotation;
};

 

4、重力感應

重力感應較簡單，只須要爲body節點添加onorientationchange事件便可。在此事件中由window.orientation屬性獲得表明當前手機方向的數值。window.orientation的值列表以下：0：與頁面首次加載時的方向一致-90：相對原始方向順時針轉了90°180：轉了180°90：逆時針轉了90°據我測試，Android2.1還沒有支持重力感應。以上即目前的觸屏事件，這些事件還沒有併入標準，但已被普遍使用。本人Android2.1，未在其餘環境下測試。