touch

Сенсорные экраны отправляют не только событие клика, но и собственное — 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). Подробнее можно посмотреть в примере.

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