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

接口

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

菜鳥教程(runoob.com)

div {

border: 1px solid black;

width: 200px;

height: 100px;

overflow: scroll;

}

HEllo word

HEllo word

HEllo word

HEllo word

HEllo word

HEllo word

HEllo word

HEllo word

HEllo word

HEllo word

HEllo word

HEllo word

HEllo word

HEllo word

HEllo word

HEllo word

HEllo word

HEllo word

HEllo word

HEllo word

HEllo word

HEllo word

HEllo word

HEllo word

HEllo word

HEllo word

HEllo word

HEllo word

HEllo word

HEllo word

HEllo word

HEllo word

HEllo word

HEllo word

HEllo word

HEllo word

HEllo word

HEllo word

HEllo word

HEllo word

HEllo word

HEllo word

HEllo word

HEllo word

HEllo word

HEllo word

function scroll( fn ) {

var beforeScrollTop = document.documentElement.scrollTop,

fn = fn || function() {};

console.log('beforeScrollTop',beforeScrollTop);

window.addEventListener("scroll", function() {

var afterScrollTop = document.documentElement.scrollTop,

delta = afterScrollTop - beforeScrollTop;

console.log('beforeScrollTop',beforeScrollTop);

console.log('afterScrollTop',afterScrollTop);

if( delta === 0 ) return false;

fn( delta > 0 ? "down" : "up" );

beforeScrollTop = afterScrollTop;

}, false);

}

scroll(function(direction) { console.log(direction) });

總結

以上是生活随笔為你收集整理的android 判断滑动方向,H5触摸事件判断滑动方向的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。