skip to main content

Element.touch

js

Кратко 🔗

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

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

Как пишется 🔗

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

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

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

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

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

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

Как понять 🔗

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

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

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

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

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

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

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

See the Pen Touch Draw by Egor Ogarkov (@Windrushfarer) on CodePen.

В работе 🔗

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

touchstart -> touchend -> mousedown -> mouseup -> click

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

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

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

See the Pen Touch Draw by Egor Ogarkov (@Windrushfarer) on CodePen.