為了給觸摸界面提供有力支持, 觸摸事件提供了響應用戶對觸摸屏或者觸摸板上操作的能力.

接口

TouchEvent

TouchEvent 是一類描述手指在觸摸平面（觸摸屏、觸摸板等）的狀態變化的事件。這類事件用于描述一個或多個觸點，使開發者可以檢測觸點的移動，觸點的增加和減少，等等。每 個 Touch 對象代表一個觸點; 每個觸點都由其位置，大小，形狀，壓力大小，和目標 element 描述。 TouchList 對象代表多個觸點的一個列表.

觸摸事件的類型

為了區別觸摸相關的狀態改變，存在多種類型的觸摸事件。可以通過檢查觸摸事件的 TouchEvent.type 屬性來確定當前事件屬于哪種類型

touchstart：當用戶在觸摸平面上放置了一個觸點時觸發。

touchend：當一個觸點被用戶從觸摸平面上移除（當用戶將一個手指離開觸摸平面）時觸發。

touchmove：當用戶在觸摸平面上移動觸點時觸發。

touchcancel：當觸點由于某些原因被中斷時觸發。

判斷滑動方向

基本原理就是記錄開始滑動（touchStart）和結束滑動（touchEnd）的坐標位置，然后進行相對位置的計算。

touchStart:function(e){ startX = e.touches[0].pageX; startY = e.touches[0].pageY; e = e || window.event;touchEnd:function(e){ const that = this; endX = e.changedTouches[0].pageX; endY = e.changedTouches[0].pageY; that.upOrDown(startX,startY,endX,endY);upOrDown:function (startX, startY, endX, endY) { const that = this; let direction = that.GetSlideDirection(startX, startY, endX, endY); switch(direction) { case 0: console.log( 沒滑動  break; case 1: console.log( 向上  break; case 2: console.log( 向下  break; case 3: console.log( 向左  break; case 4: console.log( 向右  break; default: break;//根據起點和終點返回方向 1：向上，2：向下，3：向左，4：向右,0：未滑動 GetSlideDirection:function (startX, startY, endX, endY) { const that = this; let dy = startY - endY; let dx = endX - startX; let result = 0; //如果滑動距離太短 if(Math.abs(dx) 2 Math.abs(dy) 2) { return result; let angle = that.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; //返回角度 GetSlideAngle:function (dx, dy) { return Math.atan2(dy, dx) * 180 / Math.PI; }

原生JS方法

除了H5新增的方法外，還可以用原生JS判斷view的滑動方向，代碼如下（可直接運行）：

要注意的是chrome對document.body.scrollTop一直是0，需要改成document.documentElement.scrollTop

 !DOCTYPE html  html  head  meta charset= utf-8  title 腳本之家(jb51.net) /title  style  border: 1px solid black; width: 200px; height: 100px; overflow: scroll; /style  /head  body >
相關推薦：
HTML5中的強制下載屬性download使用
HTML5 Canvas實現文本對齊的方法總結

以上就是html5觸摸事件判斷滑動方向的實現的詳細內容，其它編程語言        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。