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 — произойдёт, если событие было прервано, например, если будет слишком много одновременных точек прикосновения либо палец ушёл за пределы элемента или экрана.
Событие касания Touch Event , которое передаётся в обработчик, содержит несколько полезных полей:
- touches — массив, который содержит объекты всех точек касаний на экране (полезно для обработки мультитач);
- target Touches — массив, который содержит объекты всех точек касаний на вызываемом элементе.
Рисовалка ниже использует поля события и типы событий касаний. Используйте смартфон, так как касания не работают при использовании мыши.
На практике
Скопировать ссылку «На практике» Скопировано
Егор Огарков советует
Скопировать ссылку «Егор Огарков советует» Скопировано
🛠 Стоит учесть, что браузеры в ответ на некоторые действия пользователя отправляют одновременно и событие click , и событие touch. Например, при прикосновении к элементу (допустим по кнопке) последовательность событий будет следующей:
touchstart → touchend → mousedown → mouseup → click
Стоит помнить эту особенность, если вы на одном и том же элементе делаете обработку этих событий. Если необходимо, чтобы события мыши не возникали на элементе, то в обработчике события касания нужно вызвать prevent Default ( ) :
element.addEventListener('touchstart', (event) => event.preventDefault() // События мыши теперь не будут вызываться>)element.addEventListener('touchstart', (event) => event.preventDefault() // События мыши теперь не будут вызываться >)
🛠 С помощью touch событий можно делать обработку жестов. Например, свайпов. Для этого необходимо будет сохранять координаты, где пользователь прикоснулся (событие touchstart ), и сравнивать с изменением координат во время движения пальца (событие touchmove ). Подробнее можно посмотреть в примере.