移动端页面手势滑动

最新推荐文章于 2021-01-08 18:03:43 发布

原创最新推荐文章于 2021-01-08 18:03:43 发布 · 238 阅读

0 ·

CC 4.0 BY-SA版权

web开发专栏收录该内容

7 篇文章

订阅专栏

这篇博客介绍了如何通过JavaScript监听并识别iPhone和Android设备上的手指滑动事件。通过添加'touchstart'和'touchmove'事件监听器，记录触屏开始和移动时的坐标，然后计算差值来判断滑动方向（左、右、上、下）。这对于移动设备上的手势交互非常有用。

https://stackoverflow.com/questions/2264072/detect-a-finger-swipe-through-javascript-on-the-iphone-and-android

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 ) {
            /* left swipe */ 
        } else {
            /* right swipe */
        }                       
    } else {
        if ( yDiff > 0 ) {
            /* up swipe */ 
        } else { 
            /* down swipe */
        }                                                                 
    }
    /* reset values */
    xDown = null;
    yDown = null;                                             
};