Поддержка TouchEvent и MouseEvent
Интерфейс touch
позволяет существенно повысить удобство работы с приложением через устройства с сенсорным экраном. Несмотря на это, большинство современного содержимого веба рассчитано только на работу с помощью мыши. Следовательно, даже если браузер поддерживает управление через сенсорную поверхность, он всё равно должен имитировать действия мыши, чтобы функциональность, рассчитанная только на действия мыши, продолжала корректно работать.
В идеале, приложения, рассчитанные на управление касаниями, не нуждается в явной имитации действий мыши. Но так как браузер вынужден это делать, могут возникнуть некоторые проблемы взаимодействия, которые должны быть обработаны. Ниже приведены некоторые подробности таких проблем взаимодействия и последствия для разработчиков приложения.
Вызов события
Спецификация событий касания определяет несколько требований к браузеру, касающихся действий мышью или касаний сенсорной поверхности (подробнее смотрите в разделе спецификации "Работа с событиями мыши и клика"), отмечая, что браузер может вызывать как события касаний, так и события мыши в ответ на одно и то же действие пользователя.
Если в ответ на какое-то действие пользователя браузер вызывает и событие касания и событие мыши, то перед любыми событиями мыши браузер должен вызывать touchstart (en-US)
. Следовательно, если нужно, чтобы при прикосновении к целевому
(en-US) элементу события мыши не запускались, в обработчике события касания данного элемента нужно вызвать preventDefault()
. После этого никакие дополнительные события мыши не вызовутся.
Ниже представлен пример обработчика события touchmove (en-US)
, вызывающий preventDefault()
js
// touchmove handler
function process_touchmove(ev) {
// Call preventDefault() to prevent any further handling
ev.preventDefault();
}
Последовательность событий
Хотя фактическая последовательность событий касания и мыши зависит от используемого программного обеспечения, спецификация предписывает придерживаться следующей последовательности:
touchstart
- Ноль или больше событий
touchmove
, в зависимости от того, было ли движение пальца touchend
mousemove
mousedown
mouseup
click
Если в течение взаимодействия событие touchstart (en-US)
, touchmove (en-US)
или touchend (en-US)
прерывается, события мыши или клика вызываться не будут, а итоговая последовательность событий будет просто:
touchstart
- Ноль или больше событий
touchmove
, в зависимости от того, было ли движение пальца touchend