Перейти к содержанию

touch-action

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

Pointer Events

Синтаксис

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
/* Keyword values */
touch-action: auto;
touch-action: none;
touch-action: pan-x;
touch-action: pan-left;
touch-action: pan-right;
touch-action: pan-y;
touch-action: pan-up;
touch-action: pan-down;
touch-action: pinch-zoom;
touch-action: manipulation;

/* Global values */
touch-action: inherit;
touch-action: initial;
touch-action: revert;
touch-action: revert-layer;
touch-action: unset;

По умолчанию жесты панорамирования (прокрутки) и сжатия обрабатываются исключительно браузером. Приложение, использующее события Pointer, получит событие pointercancel, когда браузер начнет обрабатывать сенсорный жест. Явным образом указав, какие жесты должны обрабатываться браузером, приложение может обеспечить собственное поведение в прослушивателях pointermove и pointerup для остальных жестов. Приложения, использующие события Touch, отключают обработку жестов браузером, вызывая preventDefault(), но также должны использовать touch-action, чтобы браузер знал намерение приложения до того, как будут вызваны какие-либо прослушиватели событий.

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

После запуска жеста изменения в touch-action никак не повлияют на поведение текущего жеста.

Свойство touch-action может быть указано как:

  • Одно из ключевых слов auto, none, manipulation или
  • Одно из ключевых слов pan-x, pan-left, pan-right и/или одно из ключевых слов pan-y, pan-up, pan-down плюс, необязательно, ключевое слово pinch-zoom.

Значения

auto

Включите обработку браузером всех жестов панорамирования и масштабирования.

none

Отключите обработку браузером всех жестов панорамирования и масштабирования.

pan-x

Включите жесты горизонтального панорамирования одним пальцем. Может сочетаться с pan-y, pan-up, pan-down и/или pinch-zoom.

pan-y

Включите жесты вертикального панорамирования одним пальцем. Можно комбинировать с pan-x, pan-left, pan-right и/или pinch-zoom.

manipulation

Включите жесты панорамирования и масштабирования, но отключите дополнительные нестандартные жесты, такие как двойное касание для масштабирования. Отключение двойного касания для масштабирования избавляет браузеры от необходимости задерживать генерацию событий щелчка, когда пользователь касается экрана. Это псевдоним для «pan-x pan-y pinch-zoom» (который для совместимости сам по себе все еще действителен).

pan-left, pan-right, pan-up, pan-down

Включите жесты одним пальцем, которые начинаются с прокрутки в заданном направлении. После того, как прокрутка началась, направление все еще может быть изменено на противоположное. Обратите внимание, что прокрутка вверх (pan-up) означает, что пользователь проводит пальцем вниз по поверхности экрана, а pan-left означает, что пользователь проводит пальцем вправо. Можно комбинировать несколько направлений, за исключением случаев, когда существует более простое представление (например, «pan-left pan-right» недействительна, поскольку «pan-x» проще, но «pan-left pan-down» допустимо).

pinch-zoom

Включите панорамирование и масштабирование страницы несколькими пальцами. Это может быть объединено с любым из значений pan-.

Спецификации

Поддержка браузерами

Ссылки

Комментарии