initial commit

3 files changed, 554 insertions, 0 deletions

diff --git a/files/ru/web/api/touch_events/index.html b/files/ru/web/api/touch_events/index.html
new file mode 100644
index 0000000000..be6d85889a
--- /dev/null
+++ b/files/ru/web/api/touch_events/index.html
@@ -0,0 +1,337 @@
+---
+title: События касаний (тач-события)
+slug: Web/API/Touch_events
+translation_of: Web/API/Touch_events
+---
+<div>{{DefaultAPISidebar("Touch Events")}}</div>
+
+<p>Чтобы предоставить качественную поддержку пользовательского интерфейса, связанного с касаниями, тач-события предлагают возможность интерпретировать действия пальца (или стилуса) на сенсорных экранах или трекпадах.</p>
+
+<p>Интерфейсы событий касания - это относительно низкоуровневые API, которые можно использовать для поддержки приложений со специфическими мультитач-взаимодействиями, например жестом двумя пальцами. Мультитач взаимодействие запускается, когда палец (или стилус) впервые касается контакной поверхности. Другие пальцы могут следом коснуться поверхности и, если нужно, перемещаться по ней. Взаимодействие считается завершённым, когда пальцы с поверхности убираются. Во время взаимодействия, события касания срабатывают на начальном этапе (первое прикосновение), этапе перемещения по поверхности, и завершающем этапе (когда пальцы убираются с поверхности)..</p>
+
+<p>События касаний подобны событиям мыши за исключением того, что они поддерживают несколько одновременных касаний в разных местах сенсорной поверхности. Интерфейс {{domxref("TouchEvent")}} содержит все активные в данный момент точки прикосновения. Интерфейс {{domxref("Touch")}}, который представляет одну точку касания, включает такую информацию, как позиция точки касания относительно области видимости браузера.</p>
+
+<h2 id="Определения">Определения</h2>
+
+<dl>
+ <dt>Поверхность (Surface)</dt>
+ <dd>Чувствительная к касаниям поверхность. Это может быть экран или трекпад.</dd>
+</dl>
+
+<dl>
+ <dt>Точка касания (Touch point)</dt>
+ <dd>Точка контакта с поверхностью. Это может быть палец (или локоть, ухо, нос, что угодно, но обычно это палец) или стилус. </dd>
+</dl>
+
+<h2 id="Интерфейсы">Интерфейсы</h2>
+
+<dl>
+ <dt>{{domxref("TouchEvent")}}</dt>
+ <dd>Представляет событие, происходящее при изменении состояния касания поверхности.</dd>
+ <dt>{{domxref("Touch")}}</dt>
+ <dd>Представляет одну точку контакта пользователя с сенсорной поверхностью.</dd>
+ <dt>{{domxref("TouchList")}}</dt>
+ <dd>Представляет группу касаний; это используется, если пользователь, например, касается поверхности несколькими пальцами одновременно.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<p>В этом примере отслеживаются несколько касаний одновременно, позволяя пользователю рисовать в {{HTMLElement("canvas")}} несколькими пальцами одновременно. Это будет работать лишь в браузере, который поддерживает touch-события.</p>
+
+<div class="note"><strong>Примечание:</strong> В тексте ниже для описания контакта с поверхностью используется понятие "палец", но это также может быть стилус или другой способ контакта.</div>
+
+<h3 id="Создание_canvas">Создание canvas</h3>
+
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="600" height="600" style="border:solid black 1px;"&gt;
+  Ваш браузер не поддерживает элемент canvas.
+&lt;/canvas&gt;
+&lt;br&gt;
+Log: &lt;pre id="log" style="border: 1px solid #ccc;"&gt;&lt;/pre&gt;</pre>
+
+<h3 id="Добавление_обработчиков_событий">Добавление обработчиков событий</h3>
+
+<p>После загрузки страницы будет вызвана функция <code>startup()</code>, показанная ниже</p>
+
+<pre class="brush: js notranslate">function startup() {
+  var el = document.getElementById("canvas");
+  el.addEventListener("touchstart", handleStart, false);
+  el.addEventListener("touchend", handleEnd, false);
+  el.addEventListener("touchcancel", handleCancel, false);
+  el.addEventListener("touchmove", handleMove, false);
+}</pre>
+
+<p>document.addEventListener("DOMContentLoaded", startup);</p>
+
+<p>Данная функция просто добавляет обработчики событий для элемента {{HTMLElement("canvas")}}, чтобы мы могли обрабатывать события касания по мере их возникновения</p>
+
+<h4 id="Отслеживание_новых_касаний">Отслеживание новых касаний</h4>
+
+<p>Рассмотрим касания в действии.</p>
+
+<pre class="brush: js notranslate">var ongoingTouches = [];
+</pre>
+
+<p>Когда возникает событие {{event("touchstart")}}, свидетельствующее о новом касании к поверхности, вызывается приведённая ниже функция <code>handleStart()</code>.</p>
+
+<pre class="brush: js notranslate">function handleStart(evt) {
+  evt.preventDefault();
+  console.log("touchstart.");
+  var el = document.getElementById("canvas");
+  var ctx = el.getContext("2d");
+  var touches = evt.changedTouches;
+
+  for (var i = 0; i &lt; touches.length; i++) {
+    console.log("touchstart:" + i + "...");
+    ongoingTouches.push(copyTouch(touches[i]));
+    var color = colorForTouch(touches[i]);
+    ctx.beginPath();
+    ctx.arc(touches[i].pageX, touches[i].pageY, 4, 0, 2 * Math.PI, false);  // a circle at the start
+    ctx.fillStyle = color;
+    ctx.fill();
+    console.log("touchstart:" + i + ".");
+  }
+}
+</pre>
+
+<p>Она вызывает {{domxref("event.preventDefault()")}} для того, чтобы предотвратить обработку браузером события касания (это также предотвращает обработку события мыши). Затем мы получаем контекст и извлекаем список измененных точек касаний из свойства {{domxref("TouchEvent.changedTouches")}} данного события.</p>
+
+<p>После этого мы перебираем все объекты {{domxref("Touch")}} в списке, помещая их в массив активных точек касания и рисуя начальную точку в виде маленького кружка; мы используем линию толщиной 4 пикселя, поэтому получим аккуратный круг радиусом 4 пикселя.</p>
+
+<h4 id="Рисование_движением">Рисование движением</h4>
+
+<p>Каждый раз, когда двигается один или несколько пальцев, срабатывает событие {{event("touchmove")}}, в результаете чего вызывается наша функция <code>handleMove()</code>.В этом примере данная функция ответственна за обновление данных о касании и рисование линии от предыдущей до текущей точки касания.</p>
+
+<pre class="brush: js notranslate">function handleMove(evt) {
+  evt.preventDefault();
+  var el = document.getElementById("canvas");
+  var ctx = el.getContext("2d");
+  var touches = evt.changedTouches;
+
+  for (var i = 0; i &lt; touches.length; i++) {
+    var color = colorForTouch(touches[i]);
+    var idx = ongoingTouchIndexById(touches[i].identifier);
+
+    if (idx &gt;= 0) {
+      console.log("continuing touch "+idx);
+      ctx.beginPath();
+      console.log("ctx.moveTo(" + ongoingTouches[idx].pageX + ", " + ongoingTouches[idx].pageY + ");");
+      ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY);
+      console.log("ctx.lineTo(" + touches[i].pageX + ", " + touches[i].pageY + ");");
+      ctx.lineTo(touches[i].pageX, touches[i].pageY);
+      ctx.lineWidth = 4;
+      ctx.strokeStyle = color;
+      ctx.stroke();
+
+      ongoingTouches.splice(idx, 1, copyTouch(touches[i]));  // swap in the new touch record
+      console.log(".");
+    } else {
+      console.log("can't figure out which touch to continue");
+    }
+  }
+}
+</pre>
+
+<p>Функция также перебирает измененные касания, ищет в нашем массиве данных о касаниях предыдущие данные о каждом касании для определения начальной точки каждого отрезка линии, который должен быть нарисован с помощью касания. Это реализовано путем отслеживания свойства {{domxref("Touch.identifier")}} каждого касания. Это свойство является уникальным числом для каждого касания, и остается неизменным на протяжении всего времени контакта пальца с экраном.</p>
+
+<p>Это позволяет нам получать координаты предыдущей позиции каждого касания и использовать подходящий метод "canvas-контекста" для рисования отрезка линии, соединяющего начало и конец.</p>
+
+<p>После рисования линии, мы вызываем <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/splice"><code>Array.splice()</code></a>, чтобы в массиве <code>ongoingTouches</code> заменить предыдущие данные о точке касания на текущие.</p>
+
+<h4 id="Обработка_завершения_касания">Обработка завершения касания</h4>
+
+<p>Когда пользователь убирает палец с сенсорной поверхности, срабатывает событие {{domxref("Element/touchend_event", "touchend")}}. Мы обрататываем его, вызывая фунцию <code>handleEnd()</code>, которая представлена ниже. Ее задача - рисовать последний отрезок линии для каждого касания, которое завершилось, и удалять точку касания из текущего списка касаний.</p>
+
+<pre class="brush: js notranslate">function handleEnd(evt) {
+  evt.preventDefault();
+  log("touchend");
+  var el = document.getElementById("canvas");
+  var ctx = el.getContext("2d");
+  var touches = evt.changedTouches;
+
+  for (var i = 0; i &lt; touches.length; i++) {
+    var color = colorForTouch(touches[i]);
+    var idx = ongoingTouchIndexById(touches[i].identifier);
+
+    if (idx &gt;= 0) {
+      ctx.lineWidth = 4;
+      ctx.fillStyle = color;
+      ctx.beginPath();
+      ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY);
+      ctx.lineTo(touches[i].pageX, touches[i].pageY);
+      ctx.fillRect(touches[i].pageX - 4, touches[i].pageY - 4, 8, 8);  // and a square at the end
+      ongoingTouches.splice(idx, 1);  // remove it; we're done
+    } else {
+      console.log("can't figure out which touch to end");
+    }
+  }
+}
+</pre>
+
+<p>Она очень похожа на предыдущюю функцию; единственное отличие заключается в том, что,что теперь мы рисуем маленький квадрат, чтобы обозначить конец, и в том, что когда мы мы вызываем  <code><a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/splice">Array.splice()</a></code>, мы просто удаляем старую запись из текущего списка касаний без добавления обновленной информации. В результате мы прекращаем отслеживать эту точку касания.</p>
+
+<h4 id="Обработка_отмененных_касаний">Обработка отмененных касаний</h4>
+
+<p>Если палец пользователя перемещается в интерфейс браузера или прикосновение должно быть отменено, отправляется событие {{domxref("Element/touchcancel_event", "touchcancel")}}, и мы вызываем функцию <code>handleCancel()</code>, приведённую ниже.</p>
+
+<pre class="brush: js notranslate">function handleCancel(evt) {
+  evt.preventDefault();
+  console.log("touchcancel.");
+  var touches = evt.changedTouches;
+
+  for (var i = 0; i &lt; touches.length; i++) {
+    var idx = ongoingTouchIndexById(touches[i].identifier);
+    ongoingTouches.splice(idx, 1);  // remove it; we're done
+  }
+}
+</pre>
+
+<p>Поскольку идея состоит в том, чтобы немедленно прервать касание, мы просто удаляем его из текущего списка касаний без рисования завершающего отрезка линии.</p>
+
+<h3 id="Удобные_функции">Удобные функции</h3>
+
+<p>Этот пример использует две удобные функции, которые следует кратко рассмотреть, чтобы сделать остальную часть кода более понятной.</p>
+
+<h4 id="Выбор_цвета_для_каждого_касания">Выбор цвета для каждого касания</h4>
+
+<p>Чтобы рисунок каждого касания выглядел по-разному, используется функция <code>colorForTouch()</code>, в которой цвета выбираются на основе уникального идентификатора касаний. Этот идентификатор является скрытым числом, но мы, по крайней мере, можем полагаться на то, что у каждого активного на данный момент касания он уникальный.</p>
+
+<pre class="brush: js notranslate">function colorForTouch(touch) {
+  var r = touch.identifier % 16;
+  var g = Math.floor(touch.identifier / 3) % 16;
+  var b = Math.floor(touch.identifier / 7) % 16;
+  r = r.toString(16); // make it a hex digit
+  g = g.toString(16); // make it a hex digit
+  b = b.toString(16); // make it a hex digit
+  var color = "#" + r + g + b;
+  console.log("color for touch with identifier " + touch.identifier + " = " + color);
+  return color;
+}
+</pre>
+
+<p>Результатом этой функции является строка, которую можно использовать при вызове {{HTMLElement("canvas")}}-функций для задания цвета рисования. Например, для значения {{domxref("Touch.identifier")}}, равного 10, результатом будет "#a31".</p>
+
+<h4 id="Копирование_объекта_касания">Копирование объекта касания</h4>
+
+<p>Некоторые браузеры (например, мобильный Safari) повторно используют объекты касания в разных событиях, поэтому лучше копировать только важные свойства, а не ссылаться на весь объект.</p>
+
+<pre class="brush: js notranslate">function copyTouch({ identifier, pageX, pageY }) {
+  return { identifier, pageX, pageY };
+}</pre>
+
+<h4 id="Поиск_текущего_касания">Поиск текущего касания</h4>
+
+<p>Приведённая ниже функция <code>ongoingTouchIndexById()</code> сканирует весь массив <code>ongoingTouches</code>, чтобы найти касание, соответствующее данному идентификатору, после чего возвращает в массив индекс этого касания.</p>
+
+<pre class="brush: js notranslate">function ongoingTouchIndexById(idToFind) {
+  for (var i = 0; i &lt; ongoingTouches.length; i++) {
+    var id = ongoingTouches[i].identifier;
+
+    if (id == idToFind) {
+      return i;
+    }
+  }
+  return -1;    // not found
+}
+</pre>
+
+<h4 id="Отображение_происходящего">Отображение происходящего</h4>
+
+<pre class="brush: js notranslate">function log(msg) {
+  var p = document.getElementById('log');
+  p.innerHTML = msg + "\n" + p.innerHTML;
+}</pre>
+
+<p>Если ваш браузер поддерживает это, вы можете {{LiveSampleLink('Example', 'посмотреть живой пример')}}.</p>
+
+<p><a href="http://jsfiddle.net/Darbicus/z3Xdx/10/">Пример sFiddle</a></p>
+
+<h2 id="Дополнительные_советы">Дополнительные советы</h2>
+
+<p>Этот раздел даёт дополнительные советы о том, как обрабатывать события касаний в ваших веб-приложениях.</p>
+
+<h3 id="Обработка_кликов">Обработка кликов</h3>
+
+<p>Поскольку вызов <code>preventDefault()</code> для события {{event("touchstart")}} или первого события из серии событий {{domxref("Element/touchmove_event", "touchmove")}} предотвращает запуск соответствующих событий мыши, более распространена практика вызова <code>preventDefault()</code> именно для события <code>touchmove</code>, а не <code>touchstart</code>. Таким образом, события мыши всё ещё будут вызываться, а такие элементы, как ссылки, будут продолжать работать. В качестве альтернативы, в некоторых фреймворках для этой же цели события касаний дублируются событиями мыши.</p>
+
+<p>Данный пример очень упрощён и может привести к странному поведению. Он уместен исключительно как учебный пример.</p>
+
+<pre class="brush: js notranslate">function onTouch(evt) {
+  evt.preventDefault();
+  if (evt.touches.length &gt; 1 || (evt.type == "touchend" &amp;&amp; evt.touches.length &gt; 0))
+    return;
+
+  var newEvt = document.createEvent("MouseEvents");
+  var type = null;
+  var touch = null;
+
+  switch (evt.type) {
+    case "touchstart":
+      type = "mousedown";
+      touch = evt.changedTouches[0];
+      break;
+    case "touchmove":
+      type = "mousemove";
+      touch = evt.changedTouches[0];
+      break;
+    case "touchend":
+      type = "mouseup";
+      touch = evt.changedTouches[0];
+      break;
+  }
+
+  newEvt.initMouseEvent(type, true, true, evt.originalTarget.ownerDocument.defaultView, 0,
+    touch.screenX, touch.screenY, touch.clientX, touch.clientY,
+    evt.ctrlKey, evt.altKey, evt.shiftKey, evt.metaKey, 0, null);
+  evt.originalTarget.dispatchEvent(newEvt);
+}
+</pre>
+
+<h3 id="Вызов_preventDefault_только_при_втором_касании">Вызов preventDefault() только при втором касании</h3>
+
+<p>Один из способов запретить использовать на странице <code>pinchZoom</code> (зум с помощью щипка), – вызвать <code>preventDefault()</code> для второго касания, когда одно касание уже активно. Такое поведение плохо прописано в спецификации событий касаний и приводит к разному поведению в разных браузерах. Например, iOS предотвратит зум, но всё ещё будт позволять перетискивание (panning) двумя пальцами; в Android, наоборот, можно будет осуществлять перетаскивание (panning), но не зум; Opera и Firefox на данный момент предотвращают и перетаскивание (panning) и зум. На данный момент для запрета использования зума рекомендуется полагаться не на какое-то конкретное поведение, а на meta-данные для "viewport".</p>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Touch Events 2', '#touch-interface', 'Touch')}}</td>
+   <td>{{Spec2('Touch Events 2')}}</td>
+   <td>Добавлены свойства <code>radiusX</code>, <code>radiusY</code>, <code>rotationAngle</code>, <code>force</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Touch Events', '#touch-interface', 'Touch')}}</td>
+   <td>{{Spec2('Touch Events')}}</td>
+   <td>Начальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2>
+
+<h3 id="Touch">Touch</h3>
+
+<p>События касаний обычно доступны на устройствах с сенсорными экранами, но многие браузеры делают API событий касаний недоступными на всех компьютерах, даже имеющих сенсорный экран.</p>
+
+<p>Прочина этого заключается в том, что некоторые веб-сайты используют поддержку данного API в качестве показателя того, что браузер запущен на мобильном устройстве. Если API событий касания доступен, значит эти сайты будут предполагать работу с мобильного устройства и предоставлять соответствующее содержимое, оптимизированное для мобильных устройств. Это может существенно усложнить работу для пользователей десктопов с сенсорными экранами.</p>
+
+<p>Для поддержки и касаний и мыши на всех типах устройств, используйте вместо этого <a href="/en-US/docs/Web/API/Pointer_events">события указателя</a></p>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.Touch")}}</p>
+
+<h3 id="Firefox_события_касаний_и_многопроцессность_e10s">Firefox, события касаний и многопроцессность (e10s)</h3>
+
+<p>В Firefox события касания отключены, когда отключен e10s (электролиз; <a href="/en-US/docs/Mozilla/Firefox/Multiprocess_Firefox">многопроцессорный Firefox</a>). e10s включен по умолчанию в Firefox, но может в конечном итоге отключаться в определенных ситуациях, например, когда установлены определенные инструменты специальных возможностей или надстройки Firefox, для работы которых требуется отключение e10s. Это означает, что даже на настольном компьютере / ноутбуке с сенсорным экраном сенсорные события не будут включены.</p>
+
+<p>Вы можете проверить, отключен ли e10s, перейдя в <code>about:support</code> и посмотрев на запись «Многопроцессорная Windows» в разделе «Основы приложения». 1/1 означает, что он включен, 0/1 означает отключен.</p>
+
+<p>Если вы хотите принудительно включить e10s - чтобы явно повторно включить поддержку сенсорных событий - вам нужно перейти к <code>about:config</code> и создать новое логическое предпочтение <code>browser.tabs.remote.force-enable</code>. Установите значение <code>true</code>, перезапустите браузер, и e10s будет включен независимо от любых других настроек.</p>
diff --git a/files/ru/web/api/touch_events/supporting_both_touchevent_and_mouseevent/index.html b/files/ru/web/api/touch_events/supporting_both_touchevent_and_mouseevent/index.html
new file mode 100644
index 0000000000..51bbda0a17
--- /dev/null
+++ b/files/ru/web/api/touch_events/supporting_both_touchevent_and_mouseevent/index.html
@@ -0,0 +1,63 @@
+---
+title: Поддержка TouchEvent и MouseEvent
+slug: Web/API/Touch_events/Supporting_both_TouchEvent_and_MouseEvent
+translation_of: Web/API/Touch_events/Supporting_both_TouchEvent_and_MouseEvent
+---
+<p>{{DefaultAPISidebar("Touch Events")}}</p>
+
+<p>Интерфейс {{domxref("Touch_events","touch")}} позволяет существенно повысить удобство работы с приложением через устройства с сенсорным экраном. Несмотря на это, большинство современного содержимого веба рассчитано только на работу с помощью мыши. Следовательно, даже если браузер поддерживает управление через сенсорную поверхность, он всё равно должен имитировать действия мыши, чтобы функционал, рассчитанный только на действия мыши, продолжал корректно работать.</p>
+
+<p>В идеале, приложения, рассчитанные на управление касаниями, не нуждается в явной имитации действий мыши. Но так как браузер вынужден это делать, могут возникнуть некоторые проблемы взаимодействия, которые должны быть обработаны. Ниже приведены некоторые подробности таких проблем взаимодействия и последствия для разработчиков приложения.</p>
+
+<h2 id="Вызов_события">Вызов события</h2>
+
+<p>Спецификация событий касания определяет несколько требований к браузеру, касающихся действий мышью или касаний сенсорной поверхности (подробнее смотрите в разделе спецификации "<a href="https://w3c.github.io/touch-events/#mouse-events">Работа с событиями мыши и клика</a>"), отмечая, что браузер может вызывать как события касаний, так и события мыши в ответ на одно и то же действие пользователя.</p>
+
+<p>Если в ответ на какое-то действие пользователя браузер вызывает и событие касания и событие мыши, то перед любыми событиями мыши браузер должен вызывать {{event("touchstart")}}. Следовательно, если нужно, чтобы при прикосновении к {{domxref("Touch.target","целевому")}} элементу события мыши не запускались, в обработчике события касания данного элемента нужно вызвать {{domxref("Event.preventDefault()","preventDefault()")}}. После этого никакие дополнительные события мыши не вызовутся.</p>
+
+<p>Ниже представлен пример обработчика события {{event("touchmove")}}, вызывающий <code>preventDefault()</code></p>
+
+<pre class="brush: js notranslate">// touchmove handler
+function process_touchmove(ev) {
+  // Call preventDefault() to prevent any further handling
+  ev.preventDefault();
+}
+</pre>
+
+<h2 id="Последовательность_событий">Последовательность событий</h2>
+
+<p>Хотя фактическая последовательность событий касания и мыши зависит от используемого программного обеспечания, спецификация предписывает придерживаться следующей последовательности:</p>
+
+<ul>
+ <li><code>touchstart</code></li>
+ <li>Ноль или больше событий <code>touchmove</code>, в зависимости от того, было ли движение пальца</li>
+ <li><code>touchend</code></li>
+ <li><code>mousemove</code></li>
+ <li><code>mousedown</code></li>
+ <li><code>mouseup</code></li>
+ <li><code>click</code></li>
+</ul>
+
+<p>Если в течение взаимодействия событие {{event("touchstart")}}, {{event("touchmove")}} или {{event("touchend")}} прерывается, события мыши или клика вызываться не будут, а итоговая последовательность событий будет просто:</p>
+
+<ul>
+ <li><code>touchstart</code></li>
+ <li>Ноль или больше событий <code>touchmove</code>, в зависимости от того, было ли движение пальца</li>
+ <li><code>touchend</code></li>
+</ul>
+
+<h2 id="Сообщество">Сообщество</h2>
+
+<ul>
+ <li><a href="https://github.com/w3c/touch-events">Группа сообщества Touch Events</a></li>
+ <li><a href="https://lists.w3.org/Archives/Public/public-touchevents/">Mail list</a></li>
+ <li><a href="irc://irc.w3.org:6667/">IRC-канал W3C #touchevents </a></li>
+</ul>
+
+<h2 id="Связанные_темы_и_ресурсы">Связанные темы и ресурсы</h2>
+
+<ul>
+ <li><a href="/Web/API/Touch_events">Знакомство событиями касания</a></li>
+ <li><a href="/Web/API/Touch_events/Using_Touch_Events">Использование событий касаний</a></li>
+ <li><a href="http://www.html5rocks.com/en/mobile/touchandmouse/">Touch and Mouse (Together Again for the First Time)</a></li>
+</ul>
diff --git a/files/ru/web/api/touch_events/using_touch_events/index.html b/files/ru/web/api/touch_events/using_touch_events/index.html
new file mode 100644
index 0000000000..420a059e64
--- /dev/null
+++ b/files/ru/web/api/touch_events/using_touch_events/index.html
@@ -0,0 +1,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 &lt; 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>