Событие touch

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

События touch происходят при касании HTML-элемента на тач-экранах. Сюда входит как прикосновение пальцами, так и работа со стилусом. В зависимости от того, какое действие пользователь произвёл (прикоснулся, начал двигать пальцем и т.д.) произойдёт то или иное событие touch:

  • touchstart - срабатывает при первом касании
  • touchmove - срабатывает во время движения пальцем по элементу
  • touchend - срабатывает после окончания прикосновения
  • touchcancel - сработает когда событие было прервано

Как пишется

Секция статьи "Как пишется"

Обработчик начала касания по элементу (аналог mousedown):

        
          
          element.addEventListener("touchstart", (event) => {  console.log("Вы приложили палец к элементу")})
          element.addEventListener("touchstart", (event) => {
  console.log("Вы приложили палец к элементу")
})

        
        
          
        
      

Подписаться на событие, когда пользователь водит пальцем по элементу (аналог mousemove):

        
          
          element.addEventListener("touchmove", (event) => {  console.log("По мне ведут пальцем")})
          element.addEventListener("touchmove", (event) => {
  console.log("По мне ведут пальцем")
})

        
        
          
        
      

Подписаться на событие, когда пользователь закончил прикосновение (аналог mouseup):

        
          
          element.addEventListener("touchend", (event) => {  console.log("Прикосновение закончено")})
          element.addEventListener("touchend", (event) => {
  console.log("Прикосновение закончено")
})

        
        
          
        
      

Как понять

Секция статьи "Как понять"

Когда пользователь работает с компьютером, то чаще всего взаимодействие с элементами на экране происходит с помощью курсора. Для обработки клика нам хватает встроенного события click. Событие click так же работает, если пользователь работает с интерфейсом через смартфон или планшет и взаимодействует с помощью касаний по экрану.

Однако на мобильных устройствах есть не только нажатия, но и жесты, и мультитач. Чтобы дать разработчикам возможность обрабатывать такие сложные действия пользователей, браузеры стали предоставлять низкоуровневые API для обработки touch-событий. С их помощью можно построить интерфейсы с обработкой мультитача и жестов.

Несмотря на то, что события touch очень похожи на click, главное их отличие заключается в поддержке нескольких касаний в разных местах экрана (мультитач). Всего у touch имеется 4 различных события:

  • touchstart - произойдёт, в момент когда пользователь прикоснулся к элементу
  • touchmove - произойдёт, когда пользователь ведёт пальцем по элементу
  • touchend - произойдёт, когда пользователь убрал палец с элемента (закончил прикосновение)
  • touchcancel - произойдёт, если событие было прервано, например, если будет слишком много одновременных точек прикосновения либо палец ушёл за пределы элемента или экрана

Событие касания TouchEvent, которое передаётся в обработчик, содержит несколько полезных полей:

  • touches - массив, который содержит объекты всех точек касаний на экране (полезно для обработки мультитач)
  • targetTouches - массив, который содержит объекты всех точек касаний на вызываемом элементе

Рисовалка ниже использует поля события и типы событий касаний. Используйте смартфон, так как касания не работают при использовании мыши.

Открыть демо в новой вкладке

На практике

Секция статьи "На практике"

Егор Огарков

Секция статьи "Егор Огарков"

🛠 Стоит учесть, что браузеры в ответ на некоторые действия пользователя отправляют одновременно и событие click, и событие touch. Например, при прикосновении к элементу (допустим по кнопке) последовательность событий будет следующей:

touchstarttouchendmousedownmouseupclick

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

        
          
          element.addEventListener('touchstart', (event) => {  // События мыши теперь не будут вызываться  event.preventDefault()})
          element.addEventListener('touchstart', (event) => {
  // События мыши теперь не будут вызываться
  event.preventDefault()
})

        
        
          
        
      

🛠 С помощью touch событий можно делать обработку жестов. Например, свайпов. Для этого необходимо будет сохранять координаты, где пользователь прикоснулся (событие touchstart), и сравнивать с изменением координат во время движения пальца (событие touchmove). Подробнее можно посмотреть в примере.

Открыть демо в новой вкладке