Обнаружение касания пальцем по JavaScript на iPhone и Android - PullRequest
Новая
       16

Обнаружение касания пальцем по JavaScript на iPhone и Android

228 голосов
/ 15 февраля 2010

Как вы можете обнаружить, что пользователь провел пальцем в каком-то направлении по веб-странице с помощью JavaScript?

Мне было интересно, есть ли одно решение, которое будет работать для веб-сайтов на iPhone и Android-телефоне.

Ответы [ 18 ]

288 голосов
/ 23 апреля 2014

Простой ванильный пример кода 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.

42 голосов
/ 03 марта 2011

Я нашел этот плагин jquery touchwipe, который работает как на моем первом поколении ipod touch, так и на моем дроиде. http://www.netcu.de/jquery-touchwipe-iphone-ipad-library

27 голосов
/ 17 сентября 2016

Основываясь на ответе @ 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();
18 голосов
/ 22 февраля 2013

Вы пробовали hammer.js? http://eightmedia.github.com/hammer.js/ Также работает на телефонах Windows ..

14 голосов
/ 15 февраля 2010

То, что я использовал ранее, это то, что вы должны обнаружить событие mousedown, записать его x, y местоположение (в зависимости от того, что имеет отношение), затем обнаружить событие mouseup и вычесть два значения.

13 голосов
/ 26 ноября 2012

jQuery Mobile также включает поддержку смахивания: http://api.jquerymobile.com/swipe/

Пример 

$("#divId").on("swipe", function(event) {
    alert("It's a swipe!");
});
9 голосов
/ 15 января 2018

Я объединил несколько ответов здесь в сценарий, который использует CustomEvent для запуска перехваченных событий в DOM. Добавьте скрипт 0,7k swiped-events.min.js на свою страницу и прослушайте события swiped :

наотмашь левый 

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

8 голосов
/ 05 апреля 2017

Я нашел @givanse brilliant answer как наиболее надежный и совместимый во многих мобильных браузерах для регистрации действий смахивания.

Однако в его коде есть изменения, необходимые для его работы в современных мобильных браузерах, использующих 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;                                             
};

Проверено на:

  • Android : Chrome, UC Browser
  • iOS : Safari, Chrome, UC Browser
6 голосов
/ 25 марта 2014

Я переупаковал TouchWipe как короткий плагин jquery: detectSwipe

5 голосов
/ 14 сентября 2016

Какой-то мод самого откровенного ответа (не могу комментировать ...) для коротких ударов 

document.addEventListener('touchstart', handleTouchStart, false);        
document.addEventListener('touchmove', handleTouchMove, false);
var xDown = null;                                                        
var yDown = null;                                                        
function handleTouchStart(evt) {                                         
    xDown = evt.touches[0].clientX;                                      
    yDown = evt.touches[0].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 )>150){ //to deal with to short swipes

    if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {/*most significant*/
        if ( xDiff > 0 ) {/* left swipe */ 
            alert('left!');
        } else {/* right swipe */
            alert('right!');
        }                       
    } else {
        if ( yDiff > 0 ) {/* up swipe */
            alert('Up!'); 
        } else { /* down swipe */
            alert('Down!');
        }                                                                 
    }
    /* reset values */
    xDown = null;
    yDown = null;
    }
};
Страница:
...