В отличие от интерактивных событий над элементами, которые можно осуществить на десктопных устройствах (скролл, перетягивание, масштабирование и т.д.) мышкой, у сенсорных девайсов этот набор намного шире и разнообразней. К примеру, у нас может участвовать несколько пальцев для масштабирования, либо же мы можем перемещаться по области большой картинки движением пальца по диагонали. Для управления этими и другими сенсорными событиями (а точнее - для указания возможности их осуществления) существует CSS свойство touch-action.

Сами по себе сенсорные события - это веб-API, позволяющие браузеру интерпретировать движения пальцев или стилуса в соответствующее поведение элементов сайта. Обычно, кастомизацией этих событий занимается JavaScript, однако с помощью стилей мы можем сообщить браузеру - стоит ли вообще на них обращать внимание до того, как начнутся их прослушивания. Принцип действия очень схож с другим CSS свойством - pointer-events.

Синтаксис свойства:

.element {
  touch-action: auto;
}

При использовании свойства важно понимать, что оно применится только к блочным элементам. Для инлайновых или табличных элементов оно применится только при явном указании свойства display: block.

Значения свойства touch-action

  • auto - значение по умолчанию; позволяет браузеру обрабатывать все сенсорные события.
  • none - запрещает браузеру обрабатывать сенсорные события над элементом.
  • pan-x - перемещение по элементу разрешено по горизонтали.
  • pan-y - перемещение по элементу разрешено по вертикали.
  • manipulation - разрешено перемещение по элементу по обоим осям и масштабирование, но запрещены другие сенсорные действия (например двойное касание для масштабирования).
  • pan-left - перемещение по элементу может начаться только с движения влево, а дальше направление можно поменять.
  • pan-right - перемещение по элементу может начаться только с движения вправо, а дальше направление можно поменять.
  • pan-down - перемещение по элементу может начаться только с движения вниз, а дальше направление можно поменять.
  • pan-up - перемещение по элементу может начаться только с движения вверх, а дальше направление можно поменять.
  • pinch-zoom - разрешено взаимодействие несколькими пальцами и может комбинироваться с любым другим pan-значением.

Поддержка браузерами каждого из значений разное, поэтому за более актуальной информацией стоит обратиться к ресурсу Can I Use.

Примеры использования touch-action

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