Как обрабатывать свайпы на чисто JS? Придется ли подключать библиотеки?

Question

[Денис Букреев]

Такие дела.
Пока проект на чистом JS, вот приступил к мобильной версии и понял, что вообще даже не представляю как в JS с сенсорными дисплеями дела обстоят.

Помню только, что пару тройку лет назад что-то слыхал про какие-то библиотеки, но это очень смутно все.

Обычно задача решалась в лоб - гуглишь, скачиваешь слайдер и в нем уже с большой вероятностью реализован функционал под сенсорные устройства.

У меня же слайдер написан своими руками и теперь думаю что делать со свайпами?

Comments

[Иван]

Hammer JS - для э этих целей.

[dom1n1k]

Присоединюсь к вопросу - интересно найти хороший материал по обработке тач-событий на ванильном JS. Я примерно представляю, но системной картины в голове пока нет. Тянуть библиотеки не хочется, потому что их возможности раз в 10 превышают необхоимое.

Answer 1

[Сергей]

подключи в проект например jQuery Mobile
api.jquerymobile.com/category/events
там есть все необходимые евенты

ну или раз ты самоделкин напиши свои обработчики, вот набросок для свайпов

handleTouchStart =function(e) {                                         
    xDown = e.touches[0].clientX;                                      
    yDown = e.touches[0].clientY;                                      
};
                                                
handleTouchMove = function(e) {
    if ( ! xDown || ! yDown ) {
        return;
    }

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

    var xDiff = xDown - xUp;
    var yDiff = yDown - yUp;

    if(Math.abs( xDiff )+Math.abs( yDiff )>150)
      if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {
        if ( xDiff > 0 ) 
            alert('лево');
         else 
            alert('право');                   
      } else {
        if ( yDiff > 0 ) 
            alert('вверх'); 
         else 
            alert('вниз');                                                                 
      }
    xDown = null;
    yDown = null;
};

var xDown = null;                                                        
var yDown = null;

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

Comments

[Денис Букреев]

ну йипт, в таких случаях немного лень быть самоделкиными)

Answer 2

[Loki_lo]

hammerjs.github.io

Answer 3

[Сергей]

https://developer.mozilla.org/en-US/docs/Web/API/T...