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()
  // События мыши теперь не будут вызываться
})

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