Поддержка TouchEvent и MouseEvent

Интерфейс touch позволяет существенно повысить удобство работы с приложением через устройства с сенсорным экраном. Несмотря на это, большинство современного содержимого веба рассчитано только на работу с помощью мыши. Следовательно, даже если браузер поддерживает управление через сенсорную поверхность, он всё равно должен имитировать действия мыши, чтобы функционал, рассчитанный только на действия мыши, продолжал корректно работать.

В идеале, приложения, рассчитанные на управление касаниями, не нуждается в явной имитации действий мыши. Но так как браузер вынужден это делать, могут возникнуть некоторые проблемы взаимодействия, которые должны быть обработаны. Ниже приведены некоторые подробности таких проблем взаимодействия и последствия для разработчиков приложения.

Вызов события

Спецификация событий касания определяет несколько требований к браузеру, касающихся действий мышью или касаний сенсорной поверхности (подробнее смотрите в разделе спецификации "Работа с событиями мыши и клика"), отмечая, что браузер может вызывать как события касаний, так и события мыши в ответ на одно и то же действие пользователя.

Если в ответ на какое-то действие пользователя браузер вызывает и событие касания и событие мыши, то перед любыми событиями мыши браузер должен вызывать touchstart. Следовательно, если нужно, чтобы при прикосновении к целевому элементу события мыши не запускались, в обработчике события касания данного элемента нужно вызвать preventDefault(). После этого никакие дополнительные события мыши не вызовутся.

Ниже представлен пример обработчика события touchmove, вызывающий preventDefault()

// touchmove handler
function process_touchmove(ev) {
  // Call preventDefault() to prevent any further handling
  ev.preventDefault();
}

Последовательность событий

Хотя фактическая последовательность событий касания и мыши зависит от используемого программного обеспечания, спецификация предписывает придерживаться следующей последовательности:

  • touchstart
  • Ноль или больше событий touchmove, в зависимости от того, было ли движение пальца
  • touchend
  • mousemove
  • mousedown
  • mouseup
  • click

Если в течение взаимодействия событие touchstart, touchmove или touchend прерывается, события мыши или клика вызываться не будут, а итоговая последовательность событий будет просто:

  • touchstart
  • Ноль или больше событий touchmove, в зависимости от того, было ли движение пальца
  • touchend

Сообщество

Связанные темы и ресурсы