JavaScript 监听手机端的touch滑动事件（滑动手势）

如何监听移动端滑动手势（上 / 下 / 左 / 右滑动），今天记录下。

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:alert("点击！");break;}
}, false);

Ps：目前监听的是body事件，可自行定义监听DOM元素。

document.getElementById("xxx").addEventListener("touchstart", function(){xxxxxxxxxx
});

web前端——transform变形旋转角度正负的判断

JavaScript 监听手机端的touch滑动事件（滑动手势）相关推荐

javascript解析印象笔记导出enex文件（javascript解析xml，javascript监听手机端手指滑动事件）
今晚又是在单位值班,最近看小说在印象笔记记了几百条零散的笔记,在印象笔记app上看要一条一条点开,今天把笔记导出来尝试着用js解析它,把一条条笔记转化为一张张小卡片,像刷抖音那样滑动着看,于是就用js ...
js监听手机端的touch滑动事件
实现原理:获取触摸首尾2点的坐标,Math.atan2获得2点连成的直线与x轴正方向的夹角,从而得到滑动的方向! 原理图: <!doctype html> <html> < ...
js 监听手机端键盘弹出和收起事件
本文转自:https://www.cnblogs.com/shimily/articles/12197217.html const ua = typeof window === 'object' ? ...
监听手机端虚拟键盘的弹出和隐藏
//监听手机键盘的显示或隐藏,对指定对象做不同的处理防止指定的对象被键盘顶起 function keyboardUpOrDown(jqObj){ var use ...
Fiddler监听手机端请求和响应。
1.官方网站:https://www.telerik.com/fiddler/fiddler-classichttps://www.telerik.com/fiddler/fiddler-classi ...
JavaScript监听手机物理返回键的两种解决方法
JavaScript监听手机物理返回键的两种解决方法参考文章: (1)JavaScript监听手机物理返回键的两种解决方法 (2)https://www.cnblogs.com/xzzzys/p/8 ...
html鼠标滚轮监听,javascript监听鼠标滚轮事件浅析
我们都见到过这些效果,用鼠标滚轮实现某个表单内的数字增加减少操作,或者滚轮控制某个按钮的左右,上下滚动.这些都是通过js对鼠标滚轮的事件监听来实现的.今天这里介绍的是一点简单的js对于鼠标滚轮事件的监 ...
手机看html网页内容重叠,html5手机端叠加图片触屏滑动查看特效
特效描述:html5手机端叠加图片触屏滑动查看特效.html5手机叠加图片手指滑动查看代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 rutrum tellus a tempus ...
android列表项点击事件,Android 开发 tips(2):监听 Listview 列表项点击事件
Android 开发 tips(2):监听 Listview 列表项点击事件 (这篇和上篇本来是应该一起写的,但是太过冗长,附链接:[SimpleAdapter 在 Listview 中的应用] ht ...

JavaScript 监听手机端的touch滑动事件（滑动手势）

JavaScript 监听手机端的touch滑动事件（滑动手势）相关推荐

最新文章

热门文章