touch

События 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 - массив, который содержит объекты всех точек касаний на вызываемом элементе

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

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

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать