在iPhone和Android上通过JavaScript检测手指滑动。
在iPhone和Android上通过JavaScript检测手指滑动。
如何使用JavaScript检测用户在网页上向某个方向划动手指?
我想知道是否有一种解决方案可适用于iPhone和Android手机上的网站。
admin 更改状态以发布 2023年5月20日
水平滑动的简单vanilla JS例子:
let touchstartX = 0 let touchendX = 0 function checkDirection() { if (touchendX < touchstartX) alert('swiped left!') if (touchendX > touchstartX) alert('swiped right!') } document.addEventListener('touchstart', e => { touchstartX = e.changedTouches[0].screenX }) document.addEventListener('touchend', e => { touchendX = e.changedTouches[0].screenX checkDirection() })
你可以使用相同的逻辑进行垂直滑动。
简单的纯JS代码示例:
document.addEventListener('touchstart', handleTouchStart, false); document.addEventListener('touchmove', handleTouchMove, false); var xDown = null; var yDown = null; function getTouches(evt) { return evt.touches || // browser API evt.originalEvent.touches; // jQuery } function handleTouchStart(evt) { const firstTouch = getTouches(evt)[0]; xDown = firstTouch.clientX; yDown = firstTouch.clientY; }; function handleTouchMove(evt) { if ( ! xDown || ! yDown ) { return; } var xUp = evt.touches[0].clientX; var yUp = evt.touches[0].clientY; var xDiff = xDown - xUp; var yDiff = yDown - yUp; if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {/*most significant*/ if ( xDiff > 0 ) { /* right swipe */ } else { /* left swipe */ } } else { if ( yDiff > 0 ) { /* down swipe */ } else { /* up swipe */ } } /* reset values */ xDown = null; yDown = null; };
在Android上进行了测试。