html5學習第一課touch事件

最近開始了html5的學習，在學習的同時我把內容紀錄下來，和你們一塊兒分享。

　　今天在用手機觸摸屏的時候，很想知道html5針對觸摸屏上的處理，索性就先來學觸摸事件（touchstart、touchmove和touchend）。

      觸摸事件(touch)會在用戶手指放在屏幕上面的時候、在屏幕上滑動的時候或者是從屏幕上移開的時候出發。下面具體說明：

 

　　touchstart事件：當手指觸摸屏幕時候觸發，即便已經有一個手指放在屏幕上也會觸發。

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

　　touchend事件：當手指從屏幕上離開的時候觸發。

　　touchcancel事件：當系統中止跟蹤觸摸的時候觸發。關於這個事件的確切出發時間，文檔中並無具體說明，我們只能去猜想了。

 

　　上面的這些事件都會冒泡，也均可以取消。雖然這些觸摸事件沒有在DOM規範中定義，可是它們倒是以兼容DOM的方式實現的。因此，每一個觸摸事件的event對象都提供了在鼠標實踐中常見的屬性：bubbles(起泡事件的類型)、cancelable(是否用 preventDefault() 方法能夠取消與事件關聯的默認動做)、clientX(返回當事件被觸發時，鼠標指針的水平座標)、clientY(返回當事件觸發時，鼠標指針的垂直座標)、screenX(當某個事件被觸發時，鼠標指針的水平座標)和screenY(返回當某個事件被觸發時，鼠標指針的垂直座標)。除了常見的DOM屬性，觸摸事件還包含下面三個用於跟蹤觸摸的屬性。

 

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

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

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

 

　　每一個Touch對象包含的屬性以下。

 

　　clientX：觸摸目標在視口中的x座標。

　　clientY：觸摸目標在視口中的y座標。

　　identifier：標識觸摸的惟一ID。

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

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

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

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

　　target：觸目的DOM節點目標。

這些事件會在文檔的全部元素上面觸發，於是能夠分別操做頁面的不一樣部分。在觸摸屏幕上的元素，這些事件(包括鼠標事件)發生的順序以下：

 

　　(1)touchstart

　　(2)mouseover

　　(3)mousemove(一次)

　　(4)mousedown

　　(5)mouseup

　　(6)click

　　(7)touchend

 

　　介紹了這麼多，這些觸摸事件的兼容狀況怎麼樣呢?支持觸摸事件(touchstart、touchmove和touchend)的瀏覽器有：iOs版Safari、Android版WebKit、bada版Dolfin、OS6+中的BlackBerry WebKit、Opera Mobile 10.1+和LG專有OS中的Phantom瀏覽器。目前只有iOs版Safari支持多點觸摸。PC版Firefox 6+ 和Chrome也支持觸摸事件。

 

 

　　針對觸摸事件，咱們能夠滑動屏幕打開相應功能操做，下面介紹一下滑屏遇到的問題和解決辦法。

問題描述

一、用戶手動滑動屏幕，根據滑動的方向，打開相應的功能（如：向上滑搖錢樹經驗明細，向下滑打開任務明細，向左滑打開聚寶盆物品查看等功能），滑動事件捕獲問題。

二、你們都知道，划動都有角度問題，如：向330度方向滑動手機，要計算出它的方向問題。

三、HTML5提供的滑動事件，只能讀取到起點和終點座標，計算角度問題。

四、手機屏幕座標與標準座標系轉換問題。

解決方案

一、滑動屏幕事件使用HTML5 的touchstart滑動開始事件和touchend滑動結束事件。

二、方向的判斷，以起點作平面座標系，與終點連線作直線，直線與x正半軸計算角度；咱們以45度角爲方向分割線，如：只要滑動角度大於等於45度且小於135度，則判斷它方向爲向上滑。

三、使用Math.atan2來計算起點與終點造成的直線角度。

四、仔細對比標準座標系與屏幕座標系，咱們發現，標準座標系，上半軸爲負值，要實現轉換，只須要調換Y座標起點與終於位置便可。

處理代碼以下：

//返回角度

function  GetSlideAngle(dx, dy) {

     return  Math.atan2(dy, dx) * 180 / Math.PI;

}

 

//根據起點和終點返回方向 1：向上，2：向下，3：向左，4：向右,0：未滑動

function  GetSlideDirection(startX, startY, endX, endY) {

     var  dy = startY - endY;

     var  dx = endX - startX;

     var  result = 0;

 

     //若是滑動距離過短

     if  (Math.abs(dx) < 2 && Math.abs(dy) < 2) {

         return  result;

     }

 

     var  angle = GetSlideAngle(dx, dy);

     if  (angle >= -45 && angle < 45) {

         result = 4;

     } else  if  (angle >= 45 && angle < 135) {

         result = 1;

     } else  if  (angle >= -135 && angle < -45) {

         result = 2;

     }

     else  if  ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {

         result = 3;

     }

 

     return  result;

}

 

//滑動處理

var  startX, startY;

document.addEventListener( 'touchstart' , function  (ev) {

     startX = ev.touches[0].pageX;

     startY = ev.touches[0].pageY;  

}, false );

document.addEventListener( 'touchend' , function  (ev) {

     var  endX, endY;

     endX = ev.changedTouches[0].pageX;

     endY = ev.changedTouches[0].pageY;

     var  direction = GetSlideDirection(startX, startY, endX, endY);

     switch  (direction) {

         case  0:

             alert( "沒滑動" );

             break ;

         case  1:

             alert( "向上" );

             break ;

         case  2:

             alert( "向下" );

             break ;

         case  3:

             alert( "向左" );

             break ;

         case  4:

             alert( "向右" );

             break ;

         default :           

     }  

}, false );

 

 介紹了這些，相信對html5的touch也有所掌握了，如下爲資料的來源，謝謝他們的分享。

http://www.2cto.com/kf/201402/276737.html

http://www.cnblogs.com/tqlin/archive/2013/03/04/2942789.html