html5触摸事件如何判断滑动方向的实现?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容,让我们一起来看看吧!
为了给触摸界面提供有力支持,触摸事件提供了响应用户对触摸屏或者触摸板上操作的能力。
<强> TouchEvent
TouchEvent是一类描述手指在触摸平面(触摸屏,触摸板等)的状态变化的事件。这类事件用于描述一个或多个触点,使开发者可以检测触点的移动,触点的增加和减少,等等。每个触摸对象代表一个触点;每个触点都由其位置,大小,形状,压力大小,和目标元素描述。TouchList对象代表多个触点的一个列的表。
为了区别触摸相关的状态改变,存在多种类型的触摸事件。可以通过检查触摸事件的TouchEvent。类型属性来确定当前事件属于哪种类型
<李> touchstart:当用户在触摸平面上放置了一个触点时触发。
<李> touchend:当一个触点被用户从触摸平面上移除(当用户将一个手指离开触摸平面)时触发。
<李> touchmove:当用户在触摸平面上移动触点时触发。
<李> touchcancel:当触点由于某些原因被中断时触发。
基本原理就是记录开始滑动(touchstart)和结束滑动(touchend)的坐标位置,然后进行相对位置的计算。
touchstart:函数(e) {
startX=e.touches [0] .pageX;
startY=e.touches [0] .pageY;
e=e | | window.event;
},
touchEnd:函数(e) {=这个常量;
endX=e.changedTouches [0] .pageX;
恩迪=e.changedTouches [0] .pageY;
that.upOrDown (startX startY endX,恩迪);
},
upOrDown:函数(startX startY endX,恩迪){=这个常量;
让方向=etSlideDirection (startX startY endX,恩迪);
开关(方向){
例0:
console.log(“没滑动“);
打破;
案例1:
console.log(“向上“);
打破;
案例2:
console.log(“向下“);
打破;
案例3:
console.log(“向左“);
打破;
案例4:
console.log(“向右”);
打破;
默认值:
打破;
}
},//根据起点和终点返回方向1:向上,2:向下,3:向左,4:向右,0:未滑动
GetSlideDirection:函数(startX startY endX,恩迪){=这个常量;
让dy=startY -恩迪;
让dx=endX - startX;
让结果=0;//如果滑动距离太短
如果(Math.abs (dx) & lt;2,,Math.abs (dy) & lt;2){
返回结果;
}
让角=etSlideAngle (dx, dy);
如果(角祝辞=-45,,角& lt;45){
结果=4;
}else if(角祝辞=45,,角& lt;135){
结果=1;
}else if(角祝辞=-135,,角& lt;-45){
结果=2;
}
else if(角祝辞=135,,角& lt;=180) | |(角祝辞=-180,,角& lt;-135)){
结果=3;
}
返回结果;
},//返回角度
GetSlideAngle:函数(dx, dy) {
返回数学。量化(dy, dx) * 180/Math.PI;
}
除了H5新增的方法外,还可以用原生JS判断视图的滑动方向,代码如下(可直接运行):
要注意的是铬对document.body.scrollTop一直是0,需要改成document.documentElement。以前scrollTop
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=皍tf-8"祝辞
& lt; title>脚本之家(jb51.net) & lt;/title>
& lt; style>
p {
边界:1 px固体黑色;
宽度:200 px;
身高:100 px;
溢出:滚动;
}
& lt;/style>
& lt;/head>
& lt;身体风格=耙绯?scroll"比;
& lt; h2>你好word
& lt; h2>你好word
& lt; h2>你好word
& lt; h2>你好word
& lt; h2>你好word
& lt; h2>你好word
& lt; h2>你好word
& lt; h2>你好word
& lt; h2>你好word
& lt; h2>你好word
& lt; h2>你好word
& lt; h2>你好word
& lt; h2>你好word
& lt; h2>你好word
& lt; h2>你好word
& lt; h2>你好word
& lt; h2>你好word
& lt; h2>你好word
& lt; h2>你好word
& lt; h2>你好word
& lt; h2>你好word
& lt; h2>你好word
& lt; h2>你好word
& lt; h2>你好word
& lt; h2>你好word
& lt; h2>你好word
& lt; h2>你好word
& lt; h2>你好word
& lt; h2>你好word
& lt; h2>你好word
& lt; h2>你好word
& lt; h2>你好word
& lt; h2>你好word
