[javascript] iPhone 및 Android에서 JavaScript를 통해 손가락 스 와이프 감지

사용자가 JavaScript를 사용하여 웹 페이지에서 손가락을 어느 방향으로 쓸어 내었다는 것을 어떻게 알 수 있습니까?

iPhone과 Android 전화 모두에서 웹 사이트에 사용할 수있는 솔루션이 하나 있는지 궁금합니다.

답변

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

Android에서 테스트되었습니다.

답변

@ givanse의 답변을 바탕으로 다음과 classes같이 할 수 있습니다 .

class Swipe {
    constructor(element) {
        this.xDown = null;
        this.yDown = null;
        this.element = typeof(element) === 'string' ? document.querySelector(element) : element;

        this.element.addEventListener('touchstart', function(evt) {
            this.xDown = evt.touches[0].clientX;
            this.yDown = evt.touches[0].clientY;
        }.bind(this), false);

    }

    onLeft(callback) {
        this.onLeft = callback;

        return this;
    }

    onRight(callback) {
        this.onRight = callback;

        return this;
    }

    onUp(callback) {
        this.onUp = callback;

        return this;
    }

    onDown(callback) {
        this.onDown = callback;

        return this;
    }

    handleTouchMove(evt) {
        if ( ! this.xDown || ! this.yDown ) {
            return;
        }

        var xUp = evt.touches[0].clientX;
        var yUp = evt.touches[0].clientY;

        this.xDiff = this.xDown - xUp;
        this.yDiff = this.yDown - yUp;

        if ( Math.abs( this.xDiff ) > Math.abs( this.yDiff ) ) { // Most significant.
            if ( this.xDiff > 0 ) {
                this.onLeft();
            } else {
                this.onRight();
            }
        } else {
            if ( this.yDiff > 0 ) {
                this.onUp();
            } else {
                this.onDown();
            }
        }

        // Reset values.
        this.xDown = null;
        this.yDown = null;
    }

    run() {
        this.element.addEventListener('touchmove', function(evt) {
            this.handleTouchMove(evt).bind(this);
        }.bind(this), false);
    }
}

다음과 같이 사용할 수 있습니다.

// Use class to get element by string.
var swiper = new Swipe('#my-element');
swiper.onLeft(function() { alert('You swiped left.') });
swiper.run();

// Get the element yourself.
var swiper = new Swipe(document.getElementById('#my-element'));
swiper.onLeft(function() { alert('You swiped left.') });
swiper.run();

// One-liner.
(new Swipe('#my-element')).onLeft(function() { alert('You swiped left.') }).run();

답변

여기에 몇 가지 답변을 CustomEvent 를 사용 하여 DOM에서 스 와이프 된 이벤트를 발생 시키는 스크립트로 병합했습니다 . 0.7k swiped-events.min.js 스크립트를 페이지에 추가하고 스 와이프 한 이벤트를 수신하십시오 .

왼쪽으로 스 와이프

document.addEventListener('swiped-left', function(e) {
    console.log(e.target); // the element that was swiped
});

오른쪽으로 스 와이프

document.addEventListener('swiped-right', function(e) {
    console.log(e.target); // the element that was swiped
});

스 와이프

document.addEventListener('swiped-up', function(e) {
    console.log(e.target); // the element that was swiped
});

스 와이프

document.addEventListener('swiped-down', function(e) {
    console.log(e.target); // the element that was swiped
});

요소에 직접 연결할 수도 있습니다.

document.getElementById('myBox').addEventListener('swiped-down', function(e) {
    console.log(e.target); // the element that was swiped
});

선택적 구성

다음 속성을 지정하여 페이지에서 스 와이프 상호 작용이 작동하는 방식을 조정할 수 있습니다 (선택 사항) .

<div data-swipe-threshold="10"
     data-swipe-timeout="1000"
     data-swipe-ignore="false">
        Swiper, get swiping!
</div>

소스 코드는 Github에서 사용할 수 있습니다

답변

내가 전에 사용한 것은 mousedown 이벤트를 감지하고 x, y 위치를 기록한 다음 관련 이벤트를 감지하고 mouseup 이벤트를 감지하고 두 값을 빼야한다는 것입니다.

답변

jQuery를 모바일도 슬쩍 지원을 포함합니다 : http://api.jquerymobile.com/swipe/

예

$("#divId").on("swipe", function(event) {
    alert("It's a swipe!");
});

답변

@givanse의 훌륭한 답변이 스 와이프 동작을 등록하기 위해 여러 모바일 브라우저에서 가장 신뢰할 수 있고 호환되는 것으로 나타났습니다.

그러나을 사용하는 최신 모바일 브라우저에서 작동하도록 코드가 변경되었습니다 jQuery.

event.touches를 jQuery사용하여 존재 undefined하고로 바뀌면 존재하지 않습니다 event.originalEvent.touches. 없이 jQuery, event.touches잘 작동합니다.

해결책은

document.addEventListener('touchstart', handleTouchStart, false);
document.addEventListener('touchmove', handleTouchMove, false);

var xDown = null;
var yDown = null;

function handleTouchStart(evt) {
    xDown = evt.originalEvent.touches[0].clientX;
    yDown = evt.originalEvent.touches[0].clientY;
};

function handleTouchMove(evt) {
    if ( ! xDown || ! yDown ) {
        return;
    }

    var xUp = evt.originalEvent.touches[0].clientX;
    var yUp = evt.originalEvent.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;
};

에 테스트 :

안드로이드 : 크롬, UC 브라우저
iOS : Safari, Chrome, UC 브라우저

답변

TouchWipe짧은 jquery 플러그인으로 다시 패키지 했습니다.detectSwipe