Эффект перелистывания Swipe в сенсорных устройствах на JavaScript

Если вы хоть раз сталкивались с мобильными устройствами с сенсорным экраном, то, скорее всего вы уже замечали этот эффект, что-то вроде перелистывания блока, страницы, слайда, и т.д. Иными словами, вы кладете палец на сенсор дисплея, и проводите его в каком либо направлении. Как правило, это действо происходит мгновенно, в каком либо направлении. Ранее на нашем сайте уже был материал про то, как можно отслеживать touch события, а так же о возможности перемещения объектов посредством использования этих обработчиков событий. Для нашей текущей задачи эти знания нам так же помогут, потому что в настоящий момент времени в javascript нет специального обработчика события “onswipe”. Было бы удобно, если бы оно было, но так как его нет, мы рассмотрим другой вариант решения этой задачи.

Итак, чем мы можем воспользоваться, чтобы определить попытку пользователя произвести на сенсоре экрана действо, которое традиционно называют swipe. Используя наш предыдущий опыт, можем определить события прикосновения к сенсору, а так же одновременный “размах” пальцем на сенсоре.

В качестве правила, давайте уточним, какое движение по сенсорной поверхности мы будем рассматривать в качестве команды swipe. В этом действии будут причастны две переменные, это расстояние, проходимое пальцем по оси x или y, от момента возникновения события touchstart до момента touchend, а так же время, которое потребовалось для этого действия. Используя эти данные, мы можем решить, производил ли пользователь действие, о котором мы говорим, либо нет.

Методом пробы, мы можем определить среднее значение, которое проходит палец по сенсору для этого действия по горизонтали и вертикали. Что касается перемещения пальца по горизонтали, то значения расстояния примерно одинаковы, однако при перемещении с лева на право, скорость значительно выше, примерно на 200 мс. Что касается вертикали, здесь перемещение пальца по сенсору рекомендуется определять при условии не более 100px, чтобы не мешать другим командам, вследствие чего при этом могут быть проблемы с ложным срабатыванием.

Пример определения команды «swipe» в от левой стороны в правую (Для устройств, не оснащенных сенсором, так же в примере реализован симулятор для обычной компьютерной мыши).

<script>
  
window.addEventListener('load', function(){
  
    var touchsurface = document.getElementById('touchsurface'),
        startX,
        startY,
        dist,
        threshold = 150, // минимальное расстояние для swipe
        allowedTime = 200, // максимальное время прохождения установленного расстояния
        elapsedTime,
        startTime
  
    function handleswipe(isrightswipe){
        if (isrightswipe)
            touchsurface.innerHTML = 'Вы пролистнули <span style="color:red">в правую сторону!</span>'
        else{
            touchsurface.innerHTML = 'Пролистывания в правую сторону не обнаружено.'
        }
    }
  
    touchsurface.addEventListener('touchstart', function(e){
        touchsurface.innerHTML = ''
        var touchobj = e.changedTouches[0]
        dist = 0
        startX = touchobj.pageX
        startY = touchobj.pageY
        startTime = new Date().getTime() // время контакта с поверхностью сенсора
        e.preventDefault()
    }, false)
  
    touchsurface.addEventListener('touchmove', function(e){
        e.preventDefault() // отключаем стандартную реакцию скроллинга
    }, false)
  
    touchsurface.addEventListener('touchend', function(e){
        var touchobj = e.changedTouches[0]
        dist = touchobj.pageX - startX // получаем пройденную дистанцию
        elapsedTime = new Date().getTime() - startTime // узнаем пройденное время
        // проверяем затраченное время,горизонтальное перемещение >= threshold, и вертикальное перемещение <= 100
        var swiperightBol = (elapsedTime <= allowedTime && dist >= threshold && Math.abs(touchobj.pageY - startY) <= 100)
        handleswipe(swiperightBol)
        e.preventDefault()
    }, false)
  
}, false)
</script>
  
<div id="touchsurface">Пролестните в правую сторону.</div>

По событию touchend мы проверяем, что расстояние, за которое прошел указатель на сенсоре от момента события touchstart до touchend является положительным числом, выше заданного порога значения, в нашем случае это 150. В то же время, мы отсеиваем возможное вертикальное движение менее 100px. Так как вертикальное перемещение курсора может быть выше начальной точки или ниже, мы используем Math.abs().

Общая функция определения команды swipe.
В примере выше мы рассмотрели определение команды swipe на сенсорных устройствах в направлении правой стороны. Кроме этого можно определять направление курсора на все 4 стороны (вправо, влево, вверх и вниз).
Пример определения команды «swipe» в любом направлении (для устройств, не оснащенных сенсором, в примере реализована поддержка обычного курсора мыши).

Код из примера определения «swipe» на сенсоре в 4 направлениях:

window.addEventListener('load', function(){
    var el = document.getElementById('touchsurface2')
    var inner = document.getElementById('inner')
    var hidetimer = null
    swipedetect(el, function(swipedir){
        if (swipedir != 'none'){
            clearTimeout(hidetimer)
            // префиксы для имен, прим. "leftarrow.png", "rightarrow.png" и т.д.
            var bgimage = swipedir + 'arrow.png'
            inner.style.background = 'transparent url(' + bgimage + ') center center no-repeat'
            hidetimer = setTimeout(function(){ // вернуть фон через 1 сек.
                inner.style.background = ''
            }, 1000)
        }
    })
}, false)

html разметка:

<div id="touchsurface2">
<div id="inner">Проведите пальцем</div>
</div>

Мы связываем функцию swipedetect() для блока с id #touchsurface2, при возникновении действия swipe производиться смена фонового изображения блока div, таким образом, показывая направление движения пальца.

Источник © https://href.kz/blog/js/swipe-na-sensornyx-ustrojstvax-javascript

ТОП 10 случайных публикаций