diff options
Diffstat (limited to 'files/ru/web/api/touchevent/index.html')
| -rw-r--r-- | files/ru/web/api/touchevent/index.html | 145 |
1 files changed, 145 insertions, 0 deletions
diff --git a/files/ru/web/api/touchevent/index.html b/files/ru/web/api/touchevent/index.html new file mode 100644 index 0000000000..761204b552 --- /dev/null +++ b/files/ru/web/api/touchevent/index.html @@ -0,0 +1,145 @@ +--- +title: TouchEvent +slug: Web/API/TouchEvent +tags: + - API + - DOM + - Interface + - NeedsTranslation + - Reference + - TopicStub + - touch +translation_of: Web/API/TouchEvent +--- +<p>{{ APIRef("Touch Events") }}</p> + +<p>Интерфейс <strong><code>TouchEvent</code></strong> отражает событие {{domxref("UIEvent")}}, возникающее при изменении состояния касаний к сенсорной поверхности. К таким поверхностям можно отнести, например, сенсорные экраны или трекпады. Событие может описывать одну или несколько точек касания экрана и включает поддержку обнаружения движения, добавление и удаление точек касаний и так далее.</p> + +<p>Каждое прикосновение представлено объектом {{ domxref("Touch") }}, который содержит данные о позиции, размере, форме, степени давления и целевом элементе. Список прикосновений представлен объектом {{ domxref("TouchList") }}.</p> + +<p>{{InheritanceDiagram}}</p> + +<h2 id="Конструктор">Конструктор</h2> + +<dl> + <dt>{{domxref("TouchEvent.TouchEvent", "TouchEvent()")}}</dt> + <dd>Создает экземпляр <code>TouchEvent</code>.</dd> +</dl> + +<h2 id="Свойства">Свойства</h2> + +<p><em>Данный интерфейс наследует свойства своих предков, {{domxref("UIEvent")}} и {{domxref("Event")}}.</em></p> + +<dl> + <dt>{{ domxref("TouchEvent.altKey") }} {{readonlyInline}}</dt> + <dd>Булево значение, показывающее, была ли нажата клавиша <kbd>alt</kbd>, когда произошло событие касания.</dd> + <dt>{{ domxref("TouchEvent.changedTouches") }} {{readonlyInline}}</dt> + <dd>Список {{ domxref("TouchList") }}, со всеми объектами {{ domxref("Touch") }}, представляющими отдельные точки касания, состояние которых изменилось между предыдущим событием касания и текущим.</dd> + <dt>{{ domxref("TouchEvent.ctrlKey") }} {{readonlyInline}}</dt> + <dd>Булево значение, показывающее, была ли нажата клавиша <kbd>ctrl</kbd>, когда произошло событие касания</dd> + <dt>{{ domxref("TouchEvent.metaKey") }} {{readonlyInline}}</dt> + <dd>Булево значение, показывающее, была ли нажата клавиша <kbd>meta</kbd>, когда произошло событие касания.</dd> + <dt>{{ domxref("TouchEvent.shiftKey") }} {{readonlyInline}}</dt> + <dd>Булево значение, показывающее, была ли нажата клавиша <kbd>shift</kbd>, когда произошло событие касания.</dd> + <dt>{{ domxref("TouchEvent.targetTouches") }}{{readonlyInline}}</dt> + <dd>Список {{ domxref("TouchList") }} со всеми объектами {{ domxref("Touch") }}, представляющими <span class="tlid-translation translation" lang="ru"><span title="">текущие точки касания с сенсорной поверхностью,</span></span> которые находятся на одном и том же целевом элементе target.</dd> + <dt>{{ domxref("TouchEvent.touches") }} {{readonlyInline}}</dt> + <dd>Список {{ domxref("TouchList") }} со всеми объектами {{ domxref("Touch") }}, представляющими текущие точки касания с сенсорной поверхностью, вне зависимости от целевого элемента и статуса.</dd> + <dt>{{domxref("TouchEvent.rotation")}} {{non-standard_inline()}} {{readonlyInline}}</dt> + <dd>Изменение угла поворота (в градусах) с момента начала события. Положительные значения указывают на вращение по часовой стрелке, отрицательные - против часовой стрелки. Начальное значение <code>0.0</code></dd> + <dt>{{domxref("TouchEvent.scale")}} {{non-standard_inline()}} {{readonlyInline}}</dt> + <dd>Расстояние между двумя цифрами с момента начала события. Является числом с плавающей точкой, отражающим расстояние между двумя цифрами в начале события. Значения ниже 1.0 указывают на щипок (уменьшение зума), больше 1.0 - увеличение. Начальное значение: <code>1.0</code></dd> +</dl> + +<h2 id="Типы_событий_касания">Типы событий касания</h2> + +<p><span class="tlid-translation translation" lang="ru"><span title="">Существует несколько типов событий, которые могут происходить в ответ на касания</span></span>. О<span class="tlid-translation translation" lang="ru"><span title="">пределить, какое именно событие произошло, можно с помощью свойства </span></span>{{ domxref("event.type", "TouchEvent.type") }}.</p> + +<h3 id="domxrefElementtouchstart_event_touchstart">{{domxref("Element/touchstart_event", "touchstart")}}</h3> + +<p>Происходит, когда пользователь касается сенсорной поверхности. Целью события будет являться экземпляр {{ domxref("Element") }}, которого коснулись.</p> + +<h3 id="domxrefElementtouchend_event_touchend">{{domxref("Element/touchend_event", "touchend")}}</h3> + +<p>Происходит, когда пользователь удаляет точку касания поверхности (убирает палец или стилус с поверхности). Также это событие Происходит, если точка касания уходит за границы поверхности; например, если палец пользователя выходит за границу экрана.</p> + +<p>Цель события - тот же экземпляр {{ domxref("Element") }}, что и для события <code>touchstart</code> с соответствующей точкой касания, даже если точка касания переместилась за пределы элемента.</p> + +<p>Точки касания, удаленные с поверхности, содержатся в списке {{ domxref("TouchList") }}, который можно получить через атрибут <code>changedTouches</code> события.</p> + +<h3 id="domxrefElementtouchmove_event_touchmove">{{domxref("Element/touchmove_event", "touchmove")}}</h3> + +<p>Происходит, когда пользователь двигает точку касания по поверхности. Цель события - тот же экземпляр {{ domxref("element") }}, что и для события <code>touchstart</code> с соответствующей точкой касания, даже если точка касания переместилась за пределы элемента.</p> + +<p>Это событие также возникает, если изменилось значение радиуса, угла вращения или силы нажатия в точке касания.</p> + +<div class="note"><strong>Примечание:</strong> Промежуток времени, в течении которого возникают события <code>touchmove</code>, зависит от конкретного браузера, а также может сильно зависеть от возможностей устройства пользователя. Вам не следует полагаться на конкретную частоту возникновения этих событий.</div> + +<h3 id="touchcancel_event" name="touchcancel_event">{{domxref("Element/touchcancel_event", "touchcancel")}}</h3> + +<p>Происходит, если точка касания была по какой-либо причине удалена. Существует несколько возможных причин, почему это может произойти (и конкретные причины могут разниться от устройства к устройству, от браузера к браузеру):</p> + +<ul> + <li><span class="tlid-translation translation" lang="ru"><span title="">Произошло какое-то событие, отменившее прикосновение;</span> <span title="">это может произойти, если во время взаимодействия появляется модальное окно</span></span>.</li> + <li><span class="tlid-translation translation" lang="ru"><span title="">Точка касания покинула окно документа и переместилась в область пользовательского интерфейса браузера, подключаемого модуля или другого внешнего содержимого</span></span>.</li> + <li>Пользователь задал больше точек касания на экране, чем поддерживается, в этом случае наиболее ранние точки {{ domxref("Touch") }} в списке {{ domxref("TouchList") }} будут отменены.</li> +</ul> + +<h3 id="Использование_addEventListener_и_preventDefault">Использование addEventListener() и preventDefault()</h3> + +<p>Важно отметить, что во многих случаях происходят и события касаний, и события мыши (чтобы код, не использующий касания, мог продолжать взаимодействовать с пользователем). Если вы используете события касания, вам следует вызывать {{domxref("Event.preventDefault","preventDefault()")}} для предотвращения отправки событий мыши.</p> + +<p>Исключением из этого правила является браузер Chrome, начиная с версии 56 (настольный, Chrome для android, и android webview), в которой значение по-умолчанию для {{event("touchstart")}} и {{event("touchmove")}} равно <code>true</code> и вызовы метода {{domxref("Event.preventDefault","preventDefault()")}} не требуются. Чтобы переопределить такое поведение, просто установите значение опции <code>passive</code> равным <code>false</code> как показано в примере ниже. Это изменение <span class="tlid-translation translation" lang="ru"><span title="">запрещает обработчику блокировать отрисовку страницы во время прокрутки пользователем</span></span>. Демонстрация этого доступна на сайте <a href="https://developers.google.com/web/updates/2016/06/passive-event-listeners">Google Developer</a>.</p> + +<h2 id="GlobalEventHandlers">GlobalEventHandlers</h2> + +<p>{{SeeCompatTable}}</p> + +<dl> + <dt>{{ domxref("GlobalEventHandlers.ontouchstart") }} {{experimental_inline}}</dt> + <dd>Обработчик {{domxref("GlobalEventHandlers","global event handler")}} для события {{event("touchstart")}}.</dd> + <dt>{{ domxref("GlobalEventHandlers.ontouchend") }} {{experimental_inline}}</dt> + <dd>Обработчик {{domxref("GlobalEventHandlers","global event handler")}} для события {{event("touchend")}}.</dd> + <dt>{{ domxref("GlobalEventHandlers.ontouchmove") }} {{experimental_inline}}</dt> + <dd>Обработчик {{domxref("GlobalEventHandlers","global event handler")}} для события {{event("touchmove")}}.</dd> + <dt>{{ domxref("GlobalEventHandlers.ontouchcancel") }} {{experimental_inline}}</dt> + <dd>Обработчик {{domxref("GlobalEventHandlers","global event handler")}} для события {{event("touchcancel")}}.</dd> +</dl> + +<h2 id="Пример">Пример</h2> + +<p>Смотрите <a href="/en/DOM/Touch_events#Example" title="en/DOM/Touch events#Example">пример в основной статье о событиях касания</a>.</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + <tr> + <td>{{SpecName('Touch Events 2','#touchevent-interface', 'TouchEvent')}}</td> + <td>{{Spec2('Touch Events 2')}}</td> + <td>Добавлены глобальные атрибуты обработчиков <code>ontouchstart</code>, <code>ontouchend</code>, <code>ontouchmove</code>, <code>ontouchend</code></td> + </tr> + <tr> + <td>{{SpecName('Touch Events', '#touchevent-interface', 'TouchEvent')}}</td> + <td>{{Spec2('Touch Events')}}</td> + <td>Начальное определение</td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + +<p>{{Compat("api.TouchEvent")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>{{domxref("Touch_events","Touch Events Overview")}}</li> + <li>{{domxref("GestureEvent")}}</li> + <li>{{domxref("MSGestureEvent")}}</li> +</ul> |