js监听手机端的touch滑动事件
来源:互联网 发布:vps监控软件 windows 编辑:程序博客网 时间:2024/05/17 21:48
实现原理:获取触摸首尾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>
阅读全文
1 0
- js监听手机端的touch滑动事件
- js: touch 事件,滑动的实现
- JavaScript 监听屏幕滑动事件的JS
- 浅谈移动端之js touch事件 手势滑动事件
- js touch事件 手势滑动事件总结
- 手机端 touch 事件
- 手机端滑动事件监听,可绑定多个DIV
- 移动端上下滑动事件之--坑爹的touch.js
- js的touch事件
- js 监听移动端web触屏事件 滑动响应
- js滑动触屏事件监听
- JS监听手机端浏览器的后退按钮的事件方法
- JS监听手机端浏览器的后退按钮的事件方法
- 手机端滑动、长按事件插件touchswipe.js的使用示例
- touch事件监听
- Fragment监听touch事件
- js实现touch移动触屏滑动事件
- js实现touch移动触屏滑动事件
- Struts理解
- 傻瓜与专家--《像外行一样思考,像专家一样实践》读书笔记
- android如何改变系统默认横竖屏方向
- 上楼梯问题,模余防止溢出
- zip总结
- js监听手机端的touch滑动事件
- python学习系列---str和int类型内置方法
- Material Design 系列之 Toolbar
- 数据太大,记事本打不开怎么办?
- bugku flag在index里
- JVM结构、GC工作机制详解
- Label1
- python筛选中日韩文
- Android 打开本地文件