移动端判断触摸的方向

最近做微信端页面，于是趁周末梳理了下移动端的事件这一块。

通过判断手指在屏幕上移动的位置减去手指放在屏幕上时的位置，就可以得出是往什么方向滑动：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">div{position: relative;width: 500px;height: 500px;background-color: #ccc;}</style>
</head>
<body><div id="d"></div><script type="text/javascript">var d = document.getElementById('d'),startX,startY,moveX,moveY;d.addEventListener('touchstart',function(e){var target = e.targetTouches[0];startX = target.clientX,startY = target.clientY;});d.addEventListener('touchmove',function(e){var target = e.targetTouches[0];moveX = target.clientX;moveY = target.clientY;var x = moveX - startX,y = moveY - startY;// 如果x>0并且x轴上移动的距离大于y轴上移动的距离if(Math.abs(x) > Math.abs(y) && x > 0){alert('向右');}else if(Math.abs(x) > Math.abs(y) && x < 0){alert('向左');}else if(Math.abs(x) < Math.abs(y) && y > 0){alert('向下');}else if(Math.abs(x) < Math.abs(y) && x < 0){alert('向上');}});</script>
</body>
</html>

这里是通过计算得出来的x轴的距离跟y轴的距离相比较来判断的。

转载于:https://www.cnblogs.com/11lang/p/6938451.html

移动端判断触摸的方向相关推荐

移动端js触摸touch详解（附带案例源码）
移动端触摸滑动原理详解案例,实现过程通过添加DOM标签的触摸事件监听,并计算触摸距离,通过距离坐标计算触摸角度,最后通过触摸角度去判断往哪个方向触摸的. 触摸的事件列表触摸的4个事件: touchs ...
h5滚动时侧滑出现_H5触摸事件中如何判断用户滑动方向
这次给大家带来H5触摸事件中如何判断用户滑动方向,H5触摸事件中判断用户滑动方向的注意事项有哪些,下面就是实战案例,一起来看一下. 接口 TouchEvent TouchEvent 是一类描述手指在触 ...
html5触摸事件判断滑动方向,H5触摸事件中如何判断用户滑动方向
这次给大家带来H5触摸事件中如何判断用户滑动方向,H5触摸事件中判断用户滑动方向的注意事项有哪些,下面就是实战案例,一起来看一下. 接口 TouchEvent TouchEvent 是一类描述手指在触 ...
变压器同名端什么意思_变压器同名端判断图解
变压器同名端什么意思具有磁耦合的两个线圈,当电流分别从两线圈个子的某一个端子流入是,如两者产生磁通相助,则这两端叫做互感线圈的同名端.即,电流方向流入方向一直叫做同名端. 当两个线圈电流均从同名端流 ...
js/jq判断鼠标滚轮方向
js判断鼠标滚轮方向: var scrollFunc = function (e) { e = e || window.event; if (e.wheelDelta) { //判断浏览器IE,谷歌滑 ...
Swiper(Swiper master)是目前应用较广泛的移动端网页触摸内容滑动js插件
为什么80%的码农都做不了架构师?>>> Swiper(Swiper master)是目前应用较广泛的移动端网页触摸内容滑动js插件 http://www.swiper.com ...
移动端判断手机横竖屏状态
禁用用户自动缩放功能: <meta name="viewport" content="width=device-width, initial-scale=1.0, ...
浏览器端判断当前设备的运行环境
浏览器端判断当前设备的运行环境可判断环境: android iOS weixin Linux windows IE Mac 直接先上代码: let device = function(t) {let ...
H5中判断手势滑动方向
touchstart.touchend事件判断手势滑动方向 //data中进行定义 startX:null, startY:null,//mounted生命周期中进行监听 document.addEv ...

移动端判断触摸的方向

移动端判断触摸的方向相关推荐

最新文章

热门文章