Javascript touch события

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

Данные события можно отслеживать на любом элементе страницы. При срабатывании события в обработчик передается объект событие, который содержит некоторую информацию, к примеру, такие как координаты прикосновения на станице. Для того чтобы использовать обработчики события для элементов, используйте 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, либо что-то в этом роде. При возникновении событий связанный с сенсором, объект будет содержать уникальные свойства, которые содержат подробную информацию о событии прикосновения к сенсору, и другую информацию об этом.

Рассмотрим простой пример, на основе обработчика события 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 является одним из свойств сенсорного объекта. Давайте рассмотрим какие свойства могут быть на данный момент у сенсорных объектов.

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

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

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