JavaScript를 사용하여 모바일 웹 페이지에서 손가락 스와이프 방향을 감지하는 방법(iPhone/Android 호환성)?

모바일 웹 페이지에서 손가락 스와이프 감지

오늘날의 모바일 중심 세상에서는 모든 기기에서 직관적이고 반응성이 뛰어난 웹 경험을 제공하는 것이 중요합니다. . 사용자는 iPhone과 Android 휴대폰 모두에서 원활한 탐색과 상호 작용을 기대합니다. 모바일 탐색에 필수적인 일반적인 제스처 중 하나는 손가락 스와이프입니다.

문제: iPhone과 Android 기기 간의 호환성을 보장하면서 JavaScript를 사용하여 웹 페이지에서 사용자의 손가락 스와이프 방향을 어떻게 정확하게 감지합니까? ?

해결책: 다행히 최신 브라우저에서는 개발자가 터치 이벤트를 추적할 수 있는 JavaScript API를 제공합니다. 다음은 프로젝트에 통합할 수 있는 간단한 Vanilla JS 코드 조각입니다.

<code class="javascript">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;                                             
};</code>

테스트: 이 코드 조각은 테스트를 거쳐 Android 기기에서 작동하는 것으로 확인되었습니다. iPhone과 Android 휴대폰 모두에서 모바일 사용자의 사용자 경험을 향상하려면 프로젝트에 이를 구현하세요.

위 내용은 JavaScript를 사용하여 모바일 웹 페이지에서 손가락 스와이프 방향을 감지하는 방법(iPhone/Android 호환성)?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!