> 웹 프론트엔드 > JS 튜토리얼 > iPhone 및 Android의 JavaScript에서 손가락 스와이프 방향을 감지하고 결정하는 방법은 무엇입니까?

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

DDD
풀어 주다: 2024-10-19 18:55:02
원래의
649명이 탐색했습니다.

How to Detect and Determine Finger Swipe Direction in JavaScript on iPhone and Android?

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿