移動端判斷觸摸的方向
阿新 • • 發佈：2017-06-03
art math starty title pos round document ava 通過
最近做微信端頁面，於是趁周末梳理了下移動端的事件這一塊。
通過判斷手指在屏幕上移動的位置減去手指放在屏幕上時的位置，就可以得出是往什麽方向滑動：
<!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軸的距離相比較來判斷的。
移動端判斷觸摸的方向