js监听手机端的touch滑动事件

实现原理：获取触摸首尾2点的坐标，Math.atan2获得2点连成的直线与x轴正方向的夹角，从而得到滑动的方向！
原理图：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>javascript判断手指在移动端上滑动的方向</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
</style>
</head>
<body>
请在移动端，PC上无法查看效果，滑动查看效果<script>var startx, starty;
//获得角度
function getAngle(angx, angy) {return Math.atan2(angy, angx) * 180 / Math.PI;
};//根据起点终点返回方向 1向上 2向下 3向左 4向右 0未滑动
function getDirection(startx, starty, endx, endy) {var angx = endx - startx;var angy = endy - starty;var result = 0;//如果滑动距离太短if (Math.abs(angx) < 2 && Math.abs(angy) < 2) {return result;}var angle = getAngle(angx, angy);if (angle >= -135 && angle <= -45) {result = 1;} else if (angle > 45 && angle < 135) {result = 2;} else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {result = 3;} else if (angle >= -45 && angle <= 45) {result = 4;}return result;
}
//手指接触屏幕
document.addEventListener("touchstart", function(e){startx = e.touches[0].pageX;starty = e.touches[0].pageY;
}, false);
//手指离开屏幕
document.addEventListener("touchend", function(e) {var endx, endy;endx = e.changedTouches[0].pageX;endy = e.changedTouches[0].pageY;var direction = getDirection(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);
</script>
</body>
</html>

js监听手机端的touch滑动事件相关推荐

JavaScript 监听手机端的touch滑动事件（滑动手势）
如何监听移动端滑动手势(上 / 下 / 左 / 右滑动),今天记录下. var startx, starty;//获得角度 function getAngle(angx, angy) {return ...
js 监听手机端键盘弹出和收起事件
本文转自:https://www.cnblogs.com/shimily/articles/12197217.html const ua = typeof window === 'object' ? ...
php滑动拼图验证,JS实现PC手机端和嵌入式滑动拼图验证码三种效果
PC和手机端网站滑动拼图验证码效果源码,同时包涵了弹出式Demo,使用ajax形式提交二次验证码所需的验证结果值,嵌入式Demo,使用表单形式提交二次验证所需的验证结果值,移动端手动实现弹出式Demo ...
html 页面自动滚动,js监听html页面的上下滚动事件方法
最近在一个项目中,在写前端页面的时候,想像以前做Android时在页面时刻监听上下滚动的事件,查找资料发现由鼠标或类似用户动作触发的事件有以下图示: 不多说了,直接上代码了,经过测试可以使用: Dom ...
js监听页面最大化，最小化事件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
javascript解析印象笔记导出enex文件（javascript解析xml，javascript监听手机端手指滑动事件）
今晚又是在单位值班,最近看小说在印象笔记记了几百条零散的笔记,在印象笔记app上看要一条一条点开,今天把笔记导出来尝试着用js解析它,把一条条笔记转化为一张张小卡片,像刷抖音那样滑动着看,于是就用js ...
手机HTML拼图验证,JS实现PC手机端和嵌入式滑动拼图验证码三种效果_气质_前端开发者...
PC和手机端网站滑动拼图验证码效果源码,同时包涵了弹出式Demo,使用ajax形式提交二次验证码所需的验证结果值,嵌入式Demo,使用表单形式提交二次验证所需的验证结果值,移动端手动实现弹出式Demo ...
监听手机端虚拟键盘的弹出和隐藏
//监听手机键盘的显示或隐藏,对指定对象做不同的处理防止指定的对象被键盘顶起 function keyboardUpOrDown(jqObj){ var use ...
Fiddler监听手机端请求和响应。
1.官方网站:https://www.telerik.com/fiddler/fiddler-classichttps://www.telerik.com/fiddler/fiddler-classi ...

js监听手机端的touch滑动事件

js监听手机端的touch滑动事件相关推荐

最新文章

热门文章