1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
|
---
title: Использование событий касания
slug: Web/API/Touch_events/Using_Touch_Events
translation_of: Web/API/Touch_events/Using_Touch_Events
---
<p>{{DefaultAPISidebar("Touch Events")}}</p>
<p>На сегодняшний день бо́льшая часть содержимого в вебе рассчитана на работу с использованием клавиатуры и мыши. Тем не менее, всё больше появляется устройств с сенсорным экраном (особенно мобильных) и веб-приложения могут либо напрямую обрабатывать сенсорный ввод с помощью {{domxref("Touch_events","Событий касаний")}}, либо интерпретировать события мыши. Недостатком использования событий мыши является то, что они не поддерживают одновременный ввод, тогда как события касаний поддерживают несколько одновременных прикосновений (возможно в разных местах сенсорной поверхности), повышая тем самым удобство работы с интерфейсом.</p>
<p>Интерфейсы событий касания поддерживают взаимодействие с приложением с помощью одного или нескольких одновременных прикосновений, такие как жест двумя пальцами. Взаимодействие с помощью нескольких одновременных прикосновений начинается, когда палец (или стилус) впервые касается контактной поверхности. Другие пальцы могут последовательно касаться поверхности и, если нужно, перемещаться по ней. Взаимодействие заканчивается, когда пальцы убираются с поверхности. На протяжении этого взаимодействия приложение получает события касания на начальной стадии, стадии перемещения и стадии завершения. Приложение может применять собственную семантику к сенсорному вводу.</p>
<h2 id="Интерфейсы">Интерфейсы</h2>
<p>События касаний включают три интерфейса {{domxref("Touch")}}, {{domxref("TouchEvent")}} и {{domxref("TouchList")}}, а также следующие типы событий</p>
<ul>
<li>{{event("touchstart")}} - вызывается в момент касания сенсорной поверхности</li>
<li>{{event("touchmove")}} - вызывается при перемещении по сенсорной поверхности</li>
<li>{{event("touchend")}} - вызывается, если убрали палец</li>
<li>{{event("touchcancel")}} - вызывается в момент прерывания события (например, создано слишком много точек касания).</li>
</ul>
<p>Интерфейс {{domxref("Touch")}} представляет собой одну точка контакта с сенсорной поверхностью. Точка контакта обычно называется точкой касания или просто касанием. Касание обычно генерируется пальцем или стилусом на сенсорной поверхности. <a href="/Web/API/Touch#Properties">Свойства</a> точки касания включают уникальный идентификатор, целевой элемент точки касания, а также координаты X и Y точки касания относительно области видимости, страницы или экрана.</p>
<p>Интерфейс {{domxref("TouchList")}} представляет список точек контакта с сенсорной поверхностью, по одной точке касания на каждый контакт с поверхностью. Таким образом, если пользователь активировал сенсорную поверхность одним пальцем, список будет содержать один элемент, а если пользователь прикоснулся к поверхности тремя пальцами, в списке будет три элемента.</p>
<p>Интерфейс {{domxref("TouchEvent")}} представляет событие, которое отправляется, когда меняется состояние контактов с сенсорной поверхностью. Изменения состояния включают начальный контакт с сенсорной поверхностью, перемещение точки касания при сохранении контакта с поверхностью, отпускание точки касания и прерывание события касания. Атрибуты интерфейса включают состояние нескольких клавиш-модификаторов (например, клавиши <kbd>Shift</kbd>) и следующий список данных:</p>
<ul>
<li>{{domxref("TouchEvent.touches","touches")}} - список всех точек касания, находящихся в данный момент на экране</li>
<li>{{domxref("TouchEvent.targetTouches","targetTouches")}} - список точек касания на целевом DOM-элементе</li>
<li>{{domxref("TouchEvent.changedTouches","changedTouches")}} - список точек касания, элементы которых зависят от типа связанного события:
<ul>
<li>Для события {{event ("touchstart")}} - список точек касания, которые стали активными во время события</li>
<li>Для события {{event ("touchmove")}} - список точек касания, которые изменились с последнего события</li>
<li>Для события {{event ("touchend")}} - список точек касания, которые были удалены с поверхности (то есть, набор точек касания, соответствующих пальцам, которые больше не касаются поверхности)</li>
</ul>
</li>
</ul>
<p>Вместе эти интерфейсы определяют относительно низкоуровневый набор функций, но при этом поддерживают множество видов взаимодействия с помощью касаний, включая знакомые жесты с несколькими касаниями, такие как пролистывание несколькими пальцами, вращение, сжатие и масштабирование.</p>
<h2 id="От_интерфейсов_к_жестам">От интерфейсов к жестам</h2>
<p>При определении семантики жеста, приложение может учитывать различные факторы. Например, расстояние, которое прошла точка от начала до конца касания. Другим возможным фактором может быть время, например, количество времени между началом касания и завершением, или количество времени между двумя последовательными касаниями, предназначенными для создания жеста двойного нажатия. Направленность свайпа (например, слева направо, справа налево и т.д) является ещё одним фактором.</p>
<p>Списки касаний, которые использует приложение, зависят от семантики его жестов. Например, если приложение поддерживает однократное касание (тап) одного элемента, будет использоваться список {{domxref("TouchEvent.targetTouches","targetTouches")}} в обработчике события {{event("touchstart")}} для обработки точки касания в свойственной приложению манере. Если приложение поддерживает свайп двумя пальцами для любых двух точек касания, оно будет использовать список {{domxref("TouchEvent.changedTouches","changedTouches")}} в обработчике {{event("touchmove")}} для того, чтобы определить, были ли перемещены эти две точки касания, а затем реализовать семантику этого жеста в свойственной приложению манере.</p>
<p>Когда есть только одна активная точка касания, браузер обычно отправляет эмулированные события и мыши и клика. Мультитач-действия, включающие две и больше активных точек касания, обычно генерируют только события касания. Чтобы предотвратить отправку эмулированных событий мыши, используйте метод {{domxref("Event.preventDefault()","preventDefault()")}} в обработчиках событий касания. Дополнительную информацию о взаимодействии между событиями мыши и событиями касаний можно найти в статье {{domxref("Touch_events.Supporting_both_TouchEvent_and_MouseEvent", "Поддержка TouchEvent и MouseEvent")}}.</p>
<h2 id="Основные_шаги">Основные шаги</h2>
<p>Этот раздел содержит пример базового использования приведённых выше интерфейсов. Более подробный пример можно найти в статье {{domxref ("Touch_events", "События касаний (тач-события)")}}.</p>
<p>Назначьте обработчик событий для каждого типа события касания.</p>
<pre class="brush: js notranslate">// Назначение обработчика событий касания
someElement.addEventListener('touchstart', process_touchstart, false);
someElement.addEventListener('touchmove', process_touchmove, false);
someElement.addEventListener('touchcancel', process_touchcancel, false);
someElement.addEventListener('touchend', process_touchend, false);
</pre>
<p>Обработчик события, реализующий семантику жестов приложения</p>
<pre class="notranslate">// Обработчик touchstart
function process_touchstart(ev) {
// Используется данные события, чтобы вызвать соответствующие обработчики жестов
switch (ev.touches.length) {
case 1: handle_one_touch(ev); break;
case 2: handle_two_touches(ev); break;
case 3: handle_three_touches(ev); break;
default: gesture_not_supported(ev); break;
}
}
</pre>
<p>Доступ к атрибутам точки касания.</p>
<pre class="brush: js notranslate">// Создание обработчика события "touchstart"
someElement.addEventListener('touchstart', function(ev) {
// Перебор точек события, которые были активированы
// для этого элемента и обработчка каждого целевого элемента события
for (var i=0; i < ev.targetTouches.length; i++) {
process_target(ev.targetTouches[i].target);
}
}, false);
</pre>
<p>Предотвращение эмуляции событий мыши</p>
<pre class="brush: js notranslate">// Обработчик события "touchmove"
function process_touchmove(ev) {
// Вызов "preventDefault()"
ev.preventDefault();
}
</pre>
<h2 id="Лучшие_практики">Лучшие практики</h2>
<p>Вот несколько моментов, которых следует придерживаться при работе с событиями касаний:</p>
<ul>
<li>Сводите к минимуму объём работы, выполняемой в обработчиках касаний</li>
<li>Добавляйте обработчики точек касаний к определённому целевому элементу, а не ко всему документу или узлам, расположенным выше в дереве</li>
<li>Добавляйте обработчики событий {{event("touchmove")}}, {{event("touchend")}} и {{event("touchcancel")}} внутрь {{event("touchstart")}}.</li>
<li>Целевой элемент или узел для события касания должен быть достаточно большим, для касания пальцем. Если целевая область слишком мала, прикосновений к ней может привести к вызову событий для других прилегающих элементов.</li>
</ul>
<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
<p>Согласно <a href="/Web/API/Touch_events#Browser_compatibility">данным о совместимости с браузерами</a>, поддержка событий касания среди мобильных браузеров относительно неплохая. Десктопные браузеры немного отстают, хотя над этим уже ведётся работа. </p>
<p>Некоторые новые функции, связанные с областью касания (областью контакта между пользователем и сенсорной поверхностью) - находятся в процессе стандартизации. Новый функционал включает в себя радиусы эллипса по осям X и Y, которые наиболее точно описывают область контакта с сенсорной поверхностью. <em>Угол поворота</em> точки касания - градус, на который нужно повернуть упомянутый эллипс, чтобы соответствовать области контакта - также стандартизирован, как и степень давления в точке касания.</p>
<h2 id="А_что_насчёт_Событий_Указателя">А что насчёт Событий Указателя?</h2>
<p><span style="">Внедрение новых механизмов ввода усложняет обработку всех возможных событий, таких как события клавиатуры, мыши, пера, касаний. Чтобы помочь решить эту проблему, </span><a href="http://www.w3.org/TR/pointerevents/">стандарт "Pointer Events"</a><span style=""> определяет события и связанные с ними интерфейсы для обработки ввода с таких указывающих устройств, как мышь, перо, сенсорный экран и т.д. То есть, абстрактный <em>указатель</em> создаёт унифицированную модель ввода, которая может представлять точку контакта пальца, пера/стилуса или мыши. Подробнее в MDN-статье <a href="/ru/docs/Web/API/Pointer_events">События указателя</a>.</span></p>
<p>Модель событий указателя может упростить обработку разных способов ввода, поскольку указатель представляет ввод с любого устройства. В дополнение к этому, типы событий указателя очень похожи на типы событий мыши (например, <code>pointerdown</code> <code>pointerup</code>), таким образом, код для обработки событий указателя полностью совпадает с кодом обработки ввода с помощью мыши.</p>
<p>Статус реализации событий указателя в браузерах <a href="/ru/docs/">относительно высок</a>, поскольку Chrome, Firefox, IE11 и Edge имеют полные реализации.</p>
<h2 id="Примеры">Примеры</h2>
<p>Следующие документы описывают, как использовать события касаний и включают код с примерами</p>
<ul>
<li>{{domxref("Touch_events","События касаний")}}</li>
<li><a href="https://developers.google.com/web/fundamentals/design-and-ui/input/touch/touch-events">Реализация кастомных жестов</a></li>
<li><a href="http://www.javascriptkit.com/javatutors/touchevents.shtml">Введение в события касаний в JavaScript</a></li>
<li><a href="http://www.codicode.com/art/easy_way_to_add_touch_support_to_your_website.aspx">Добавление поддержки сенсорных экранов на сайта (простой способ)</a></li>
</ul>
<p>Демонстрация событий касания:</p>
<ul>
<li><a href="https://rbyers.github.io/paint.html">Paint Program (by Rick Byers)</a></li>
<li><a href="http://patrickhlauke.github.io/touch/">Touch/pointer tests and demos (by Patrick H. Lauke)</a></li>
</ul>
<h2 id="Сообщество">Сообщество</h2>
<ul>
<li><a href="https://github.com/w3c/touch-events">Группа сообщества Событий касания</a></li>
<li><a href="http://lists.w3.org/Archives/Public/public-touchevents/">Mail list</a></li>
<li><a href="irc://irc.w3.org:6667/">W3C #touchevents IRC channel</a></li>
</ul>
<h2 id="Связанные_темы_и_источники">Связанные темы и источники</h2>
<ul>
<li><a href="http://www.w3.org/TR/pointerevents/">Стандарт "Pointer Events"</a></li>
</ul>
|
