Всем привет! Сегодня мы познакомимся с touch-событиями которые отлавливаются при работе с сенсорным экраном. Итак, поехали!

К примеру у нас есть блок с текстом.

<div id="cont">
  <p style="font-size:50px;">Какой то тескт</p>
</div>

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

Это мы можем реализовать используя события touchstart и touchend.

document.querySelector('#cont').addEventListener('touchstart', function(){
	document.querySelector('#cont').style.background = '#f00';
});
  
  document.querySelector('#cont').addEventListener('touchend', function(){
	document.querySelector('#cont').style.background = '#fff';
});

Событие touchstart срабатывает когда мы касаемся выбранного элемента пальцем, а touchend когда отпускаем палец. В результате нажатия и отпускания фон элемента cont будет меняться.

Также мы можем отлавливать событие перемещения пальца по сенсору:

<p>Координата X <span id="x"></span></p>
<p>Координата Y <span id="y"></span></p>
<script>
 document.body.addEventListener('touchmove', function(evt){
	document.querySelector('#x').innerHTML = parseInt(evt.changedTouches[0].pageX);
      document.querySelector('#y').innerHTML = parseInt(evt.changedTouches[0].pageY);
});
</script>

Для этого мы используем событие touchmove. Обратите внимание что помимо инициализации события можно получать текущие координаты x, y относительно позиции нашего пальца. Координаты точки касания мы находим через объект события evt и его свойство changedTouches[0]. Ключ 0 означает что мы берем в качестве координаты первую точку касания нашего пальца. Если мы попробуем перебрать массив changedTouches, то мы получим все точки касания нашего пальца.

Отмечу что объект события и его свойство changedTouches содержится во всех touch событиях. И мы совершено спокойно можем пользоваться им в touchstart и touchend событиях.

В общем для работы с сенсорным экраном данных событий будет вполне достаточно.

Есть еще такие события:

touchenter - срабатывает когда касание происходит только в пределах выбранного элемента

touchleave - срабатывает когда точка соприкосновения выходит за пределы выбранного элемента

touchcancel - срабатывает когда точка соприкосновения вышла за пределы браузера.

Вот в принципе и все что я хотел вам рассказать про touch события в javascript.

Если появились вопросы пишите их в комментариях или группе

вк.

Я с вами прощаюсь. Желаю успехов и удачи! Пока.