О web-разработке
и даже немного больше...

Javascript touch события

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

Имя события Описание
touchstart Событие срабатывает при возникновении касания к элементу.
touchmove Событие возникает после того как пользователь прикоснулся к элементу, и перемещает палец в другую точку.
touchend Событие возникает после разрыва прикосновения к элементу.
touchenter Событие возникает при условии, что касание происходит в пределах элемента.
touchleave Событие возникает, когда точка соприкосновения выходит за рамки элемента.
touchcancel Событие возникает тогда, когда точка соприкосновения больше не регистрируется на поверхности. К примеру, перемещение за пределы браузера.

Данные события можно отслеживать на любом элементе страницы. При срабатывании события в обработчик передается объект событие, который содержит некоторую информацию, к примеру, такие как координаты прикосновения на станице. Для того чтобы использовать обработчики события для элементов, используйте element.addEventListener().
В качестве примера, мы добавим обработчик события для тега body на странице.

window.addEventListener('load', function(){ // после загрузки страницы
	document.body.addEventListener('touchstart', function(e){
		alert(e.changedTouches[0].pageX) // показ коррдинат места прикосновения по X-у.
	}, false)
}, false)

В данном примере после загрузки страницы был добавлен обработчик события touchstart на элемент document.body. Внутри функции для touchstart мы обращаемся к объекту changedTouches, который находится внутри объекта Event. Он содержит информацию о точках прикосновения инициированный на поверхности сенсора экрана. В данном примере нас интересует первое прикосновение к сенсору экрана, в частности координаты pageX.

Давайте теперь рассмотрим пример использования событий touchmove и touchend чтобы показать расстояние, пройденное в момент воздействия на сенсор от начала и до конца в блоке div.

Смотрите пример демонстрации работы (в данном примере так же добавлена эмуляция курсора мыши, для устройств без сенсора). Чтобы увидеть реакцию скрипта, на странице примера следует провести курсором по блоку.


<div class="box" id="box1">

<h3>Прикоснитесь сюда! </h3>

</div>


<h3 id="statusdiv">Событие</h3>

Сам скрипт с обработчиком событий:

<script>
window.addEventListener('load', function(){
 
    var box1 = document.getElementById('box1')
    var statusdiv = document.getElementById('statusdiv')
    var startx = 0
    var dist = 0
 
    box1.addEventListener('touchstart', function(e){
        var touchobj = e.changedTouches[0] // первая точка прикосновения
        startx = parseInt(touchobj.clientX) // положение точки касания по x, относительно левого края браузера
        statusdiv.innerHTML = 'Status: touchstart
 ClientX: ' + startx + 'px'
        e.preventDefault()
    }, false)
 
    box1.addEventListener('touchmove', function(e){
        var touchobj = e.changedTouches[0] // первая точка прикосновения для данного события
        var dist = parseInt(touchobj.clientX) - startx
        statusdiv.innerHTML = 'Событие: touchmove
Гориз. перемещение: ' + dist + 'px'
        e.preventDefault()
    }, false)
 
    box1.addEventListener('touchend', function(e){
        var touchobj = e.changedTouches[0] // первая точка прикосновения для данного события
        statusdiv.innerHTML = 'Событие: touchend
Координаты точки x: ' + touchobj.clientX + 'px'
        e.preventDefault()
    }, false)
 
}, false)
</script>

Есть несколько моментов, которые стоило бы отметить:

  • В нашем примере мы воспользовались event.preventDefault(), это нужно для того чтобы исключить возникновение стандартных реакций на действия курсора мыши со стороны браузера.
  • Для каждого из событий мы отдельно получаем доступ к первому элементу event.changedTouches[], это сделано так, потому что события могут инициироваться одновременно несколькими пальцами.
  • Для получения значения расстояния в пискелях, от начала события touchstart и завершением touchend, мы первоначально записывает значение в переменную startx при событии touchstart. После этого на протяжении всех возникновений событий touchmove мы, зная позицию clientX, вычитаем из неё значение startx.
  • Стоит обратить внимание на то, что событие touchend продолжает срабатывать, даже если вы увели курсор за пределы блока. Эту особенность так же следует учитывать при разработке.

Объект event.changedTouches[] является одним из многочисленных свойств объекта Event, в котором появляются данные в момент возникновения соприкосновения с сенсором. Давайте рассмотрим этот объект более подробно.

Объекты, возникающие во время прикосновения к сенсору.
Объект Event может возникать не только при работе с сенсором, но и при других событиях, скажем, это может быть событие onclick, onkeypress, либо что-то в этом роде. При возникновении событий связанный с сенсором, объект будет содержать уникальные свойства, которые содержат подробную информацию о событии прикосновения к сенсору, и другую информацию об этом.

Свойство Описание свойства
altkey Значение логического типа, указывает на то, была ли нажата клавиша alt во время возникновения события на сенсоре.
changedTouches Список объектов которые были задействованы на момент действия прикосновения к сенсору:

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

Вы можете использовать свойство lenght, чтобы получить количество объектов касания внутри changedTouches[]

ctrlKey Логическое значение, указывающее, была ли нажата клавиша Ctrl во время сенсорного события.
metaKey Логическое значение, указывающее, была ли нажата клавиша Meta в момент касания события. Клавиша Meta — специальная клавиша на клавиатурах MIT, Happy Hacking и Sun Microsystems. Обозначается сплошным ромбом.
shiftKey Логическое значение, указывающее, была ли нажата клавиша shift во время сенсорного события.
targetTouches Список точек соприкосновения, которые происходят в настоящее время с сенсорной поверхностью, и находятся на том же элементе от момента возникновения события.

Например, предположим, что вы свяжете событие touchstart к DIV и поместите два пальца вниз на поверхности. targetTouches будет содержать только информацию о палеце(цах), расположенном внутри DIV, а не тех что находятся извне.

Вы можете использовать свойство lenght, чтобы получить количество объектов касания внутри targetTouches[].

touches Список объектов, представляющих все касания точек соприкосновения в настоящее время в контакте с сенсорной поверхностью, независимо от того, на каких элементах сенсорной поверхности находятся точки соприкосновения на данный момент.
type Тип события, которое вызвало объект Event, скажем, это может быть touchstart, touchmove и т.д.
target Целевой элемент, связанный с этим событием

Рассмотрим простой пример, на основе обработчика события touchstart мы получим список всех точек соприкосновения посредством объекта Event, а точнее его свойства touches.

document.body.addEventListener('touchstart', function(e){
    var touchlist = e.touches
    for (var i=0; i<touchlist.length; i++){ // переберем в цикле все точки соприкосновения
        // какие-либо операции с точками объекта
    }
}, false)

Три свойства объекта evt.changedTouches, evt.targetTouches и evt.touches могут содержать информацию о всех объектах соприкосновения с сенсором. Именно через сенсорный объект вы получите подробную информацию о конкретной точке соприкосновения, такую как координаты на экране, его уникальный идентификатор, чтобы помочь вам определить, какие точки соприкосновения есть, и так далее. Вначале есть пример кода, в котором есть обращение к объекту, содержащийся внутри evt.changedTouches:

box1.addEventListener('touchstart', function(e){
    var touchobj = e.changedTouches[0] // первая точка соприкосновения
    startx = parseInt(touchobj.clientX) // положение по x относительно левой части браузера
    e.preventDefault()
}, false)

В данном примере e.changedTouches[0] является сенсорным объектом, а clientX является одним из свойств сенсорного объекта. Давайте рассмотрим какие свойства могут быть на данный момент у сенсорных объектов.

Свойство Описание
identifier Нумерация объекта соприкосновения, каждый объект на сенсоре экрана принимает свой уникльный порядковый номер. Начинается значение с 0, и далее по порядку. Сохраняется значение для каждой точки соприкосновения до того момента, пока палец пользователя не снимается с поверхности.
screenX Х координата точки касания относительно левого края экрана пользователя.
screenY Y координаты точки касания по отношению к верхнему краю экрана пользователя.
clientX Х координата точки касания относительно левого края окна просмотра, не включая смещения прокрутки.
clientY Y координаты точки касания по отношению к верхнему краю окна просмотра, не включая смещения прокрутки.
pageX Х координата точки касания относительно левого края окна просмотра, в том числе смещения прокрутки.
pageY Y координаты точки касания по отношению к верхнему краю окна просмотра, в том числе смещения прокрутки.
radiusX Радиус эллипса, который наиболее близко определяет сенсорную область (например, палец, стилус) вдоль оси х.
radiusY Радиус эллипса, который наиболее близко определяет сенсорную область (например, палец, стилус) вдоль оси y.
rotationAngle Угол (в градусах), эллипс описывается в radiusX и radiusY при повороте по часовой стрелке вокруг центра.
force Возвращает силу точки касания в виде целого числа от 0 до 1, где 0 нет силы, которая была определена устройством, и 1, максимальное значение.
target Целевой элемент точки соприкосновения, может отличаться от элемента на который размещалось событие.

document.body.addEventListener('touchstart', function(e){
 var touchobj = e.changedTouches[0]
 console.log(this.tagName) // возврат BODY
 console.log(touchobj.target) // возвращает целевой элемент
}, false)

При работе со свойствами наиболее часто вам придется работать с координатами точек соприкосновения. Немного математики, и можно узнать в каком направлении производится движение объектов, и с какой скоростью.

В качестве продолжения есть вторая часть, там мы рассматриваем пример перемещения объекта. Пример наглядно показывает возможность использования обработчика события touchmove.

Опубликован: 04.09.2016 г.

См. также:

Делаем кнопки «Поделиться в соцсетях»
Стрелочные функции в JS
Мобильное меню для сайта на CSS
Опасность использования атрибута target="_blank"
Бесконечная анимация вращения на CSS
Анимация вращения при наведении курсора
Стилизация выделения номера телефона в мобильных браузерах
Эффекты кнопок для сайта

Комментарии

  1. Артур пишет:

    Спасибо за статью!

  2. Юрий Бедулин пишет:

    Спасибо! Открыл как напоминалку, но увидел полноту раскрытия темы, чего не находил ранее! Спецом поделился ВКонтакте, чтобы Вам приятно сделать ) Заходите в Минск ) seo.siltri.by

  3. Ирина пишет:

    Огромное спасибо.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Комментарии
  • Загрузка...
Друзья сайта