在iPhone和Android上通过JavaScript检测手指滑动。

29 浏览
0 Comments

在iPhone和Android上通过JavaScript检测手指滑动。

如何使用JavaScript检测用户在网页上向某个方向划动手指?

我想知道是否有一种解决方案可适用于iPhone和Android手机上的网站。

admin 更改状态以发布 2023年5月20日
0
0 Comments

水平滑动的简单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()
})

你可以使用相同的逻辑进行垂直滑动。

0
0 Comments

简单的纯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上进行了测试。

0