iPhone 및 Android의 JavaScript에서 손가락 스와이프 방향을 감지하고 결정하는 방법은 무엇입니까?

iPhone 및 Android에서 JavaScript의 손가락 스와이프 감지

오늘날의 모바일 중심 세계에서는 다양한 기기에서 원활한 사용자 경험을 제공하는 것이 중요합니다. 유용성에 크게 기여하는 한 가지 측면은 웹 애플리케이션에서 손가락 스와이프를 감지하는 기능입니다. 이 기사에서는 iPhone 및 Android 플랫폼 모두에서 이러한 문제를 해결하는 기본 JS 솔루션을 제시합니다.

사용자 스와이프 식별

JavaScript에서 손가락 스와이프를 감지하기 위해 '터치스타트'에 대한 이벤트 리스너를 활용합니다. 그리고 '터치무브'. 이 청취자는 초기 터치 포인트(xDown, yDown)를 추적한 후 후속 터치 동작을 모니터링합니다.

스와이프 방향 결정

스와이프 방향을 식별하는 핵심은 터치하는 동안 터치 포인트 간의 차이를 계산하는 데 있습니다. '터치무브' 이벤트. x축과 y축의 차이를 비교하여 가장 중요한 움직임을 확인할 수 있습니다.

• x축의 차이가 y축의 차이보다 큰 경우: 가로 스와이프가 발생했습니다. .
• 그렇지 않으면 세로 스와이프가 발생했습니다.

이러한 계산을 바탕으로 스와이프를 다음과 같이 분류할 수 있습니다.

• 가로 스와이프: 왼쪽 또는 오른쪽
• 세로 스와이프: 위 또는 아래

샘플 코드

다음 코드 조각은 간단한 스와이프 감지의 효과적인 구현:

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

이 코드 샘플은 Android 기기에서 성공적으로 테스트되었습니다.

브라우저 호환성

제공된 솔루션은 다음 브라우저와 호환됩니다. iPhone 및 Android 모두에서:

• Safari
• Chrome
• Firefox

결론

이 JavaScript 솔루션은 다음을 가능하게 합니다. iPhone 및 Android 장치에서 손가락 스와이프를 효율적으로 감지할 수 있습니다. 터치 제스처에 자연스럽게 반응하는 보다 직관적이고 사용자 친화적인 웹 애플리케이션을 구축하기 위한 강력한 기반을 제공합니다.

위 내용은 iPhone 및 Android의 JavaScript에서 손가락 스와이프 방향을 감지하고 결정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!