path: root/files/ru/web/api/pointer_events/index.html

---
title: События указателя
slug: Web/API/Pointer_events
translation_of: Web/API/Pointer_events
---
<p>{{DefaultAPISidebar("Pointer Events")}}</p>

<p>Бо́льшая часть современного веб-контента предполагает, что указывающим устройством пользователя является мышь. Но поскольку многие устройства поддерживают другие типы указателей, таких как перо/стилус или сенсорная поверхность, возникает необходимость в расширении существующих событий указывающих устройств. Эту потребность удовлетворяют <em><a href="#term_pointer_event">События указателя</a></em>.</p>

<p>События указателя – это события DOM, которые вызываются для указывающего устройства. Они предназначены для создания единой модели обработки действий мыши, пера/стилуса или касания (одним или несколькими пальцами).</p>

<p><em><a href="#term_pointer">Указывающее устройство</a> – </em>это устройство, способное нацеливаться на определённый набор координат экрана. Наличие единой модели событий для указывающих устройств позволяет разработчикам проще создавать веб-сайты и приложения, а пользователям обеспечивает удобство использования вне зависимости от устройства.</p>

<p>События, необходимые для обработки общего ввода указывающих устройств, аналогичны {{domxref("MouseEvent","событиям мыши")}} (<code>mousedown</code>/<code>pointerdown</code>, <code>mousemove</code>/<code>pointermove</code>, и так далее.). Следовательно, типы событий указывающих устройтв намеренно похожи на события мыши.</p>

<p>В дополнение к обычным свойствам, представленным и в событиях мыши (координаты, целевой элемент, состояния кнопок и так далее) события ввода у разных указывающих устройств содержат и уникальные свойства: степень давления, форма области контакта, наклон и так далее. На самом деле, интерфейс {{domxref("PointerEvent")}} наследует все свойства {{domxref("MouseEvent")}}, облегчая так образом перенос содержимого из событий мыши в события указывающего устройства.</p>

<h2 id="Терминология">Терминология</h2>

<dl>
 <dt>Cостояние активных кнопок</dt>
 <dd>Ситуация, когда <em><a href="#term_pointer">указывающее устройство</a> </em>имеет ненулевое значение свойства <code>buttons</code>. Например, в случае с пером, это ситуация, когда перо физически контактирует с сенсорной поверхностью. или хотя бы одна кнопка нажата при наведении курсора.</dd>
 <dt>Активное указывающее устройство</dt>
 <dd>Любое <em><a href="#term_pointer">указывающее</a></em> устройство ввода, которое может производить события. Указывающее устройство считается активным, пока может производить события. Например, перо, которым консулись экрана, считается активным, поскольку может производить дополнительные события при поднятии или перемещении.</dd>
 <dt id="term_digitizer">Графический планшет (диджитайзер)</dt>
 <dd>Устройство с чувствительным покрытием, которое может фиксировать контакт. Чаще всего, это устройство с сенсорным экраном, который может распознавать касания указывающего устройства, такого как перо, стилус или палец. Некоторые сенсорные устройства могут определять приближение указателя и представлять это состояние как наведение мыши.</dd>
 <dt id="term_hit_test">Тест попадания (hit test)</dt>
 <dd>Процесс, который браузер использует при определении целевого элемента для события указывающего устройства. Обычно заключается в сопоставлении позиции указателя и визуальной области элементов на экране.</dd>
 <dt id="term_pointer">Указатель (указывающее устройство)</dt>
 <dd>Представление устройства ввода, которое может нацеливаться на определённую координату (или набор координат) на экране. Примером указателя может быть мышь, перо/стилус и прикосновение.</dd>
 <dt>Захват указателя</dt>
 <dd>Захват указателя позволяет событиям этого указателя быть перенаправленными на элемент, отличный обычного результата проверки попадания (hit test)</dd>
 <dt id="term_pointer_event">Событие указателя</dt>
 <dd>{{domxref("PointerEvent","Событие")}} DOM , вызванное для <em><a href="#term_pointer">указателя</a></em>.</dd>
</dl>

<h2 id="Интерфейсы">Интерфейсы</h2>

<p>Основным интерфейсом является {{domxref("PointerEvent")}}, который имеет {{domxref("PointerEvent.PointerEvent","constructor")}} плюс несколько типов событий и связанные с ними глобальные обработчики событий.</p>

<p>Стандарт также включает некоторые расширения для интерфейсов {{domxref("Element")}} и {{domxref("Navigator")}}.</p>

<p>Следующие подразделы содержат краткое описание каждого интерфейса и свойства.</p>

<h3 id="Интерфейс_PointerEvent">Интерфейс PointerEvent</h3>

<p>Интерфейс {{domxref("PointerEvent")}} расширяет интерфейс {{domxref("MouseEvent")}} и имеет следующие свойства. Все следующие свойства доступны {{readonlyInline}}.</p>

<dl>
 <dt>{{ domxref('PointerEvent.pointerId','pointerId')}}</dt>
 <dd>Уникальный идентификатор указателя, вызвавшего событие</dd>
 <dt>{{ domxref('PointerEvent.width','width')}}</dt>
 <dd>Ширина (величина по оси X) в пикселях CSS области контакта указателя с сенсорной поверхностью.</dd>
 <dt>{{ domxref('PointerEvent.height','height')}}</dt>
 <dd>Высота (величина по оси Y) в пикселях CSS области контакта указателя с сенсорной поверхностью.</dd>
 <dt>{{ domxref('PointerEvent.pressure','pressure')}}</dt>
 <dd>Степень давления указателя в диапазоне от <code>0</code> до <code>1</code>, где <code>0</code> – минимальное, а <code>1</code> – максимальное значение давления, которое способно обработать устройство.</dd>
 <dt>{{ domxref('PointerEvent.tangentialPressure','tangentialPressure')}}</dt>
 <dd>Степень тангенциального давления в диапазоне от <code>0</code> до <code>1</code>, где <code>0</code> – минимальное, а <code>1</code> – максимальное значение давления, которое способно обработать устройство..</dd>
 <dt>{{ domxref('PointerEvent.tiltX','tiltX')}}</dt>
 <dd>Угол (в градуса, в диапазоне от <code>-90</code> до <code>90</code>) между плоскостью Y-Z и плоскостью, содержащей как ось указателя (например, пера\стилуса), так и ось Y</dd>
 <dt>{{ domxref('PointerEvent.tiltY','tiltY')}}</dt>
 <dd>Угол (в градуса, в диапазоне от <code>-90</code> до <code>90</code>) между плоскостью X-Z и плоскостью, содержащей как ось указателя (например, пера\стилуса), так и ось X</dd>
 <dt>{{ domxref('PointerEvent.twist','twist')}}</dt>
 <dd>Поворот указывающего устройства (например, пера или стилуса) по часовой стрелке вокруг основной оси в градусах в диапазоне от<code> </code>0 до <code>359</code></dd>
 <dt>{{ domxref('PointerEvent.pointerType','pointerType')}}</dt>
 <dd>Указывает на тип устройства, которое вызвало событие (мышь, перо, касание и т.д)</dd>
 <dt>{{ domxref('PointerEvent.isPrimary','isPrimary')}}</dt>
 <dd>Указывает, является ли указывающее устройство основным для данного типа</dd>
</dl>

<h3 id="Типы_событий_и_Глобальные_Обработчики_Событий">Типы событий и Глобальные Обработчики Событий</h3>

<p>События указателя имеют 10 типов, 7 из которых похожи на аналогичные события мыши (<code>down</code>, <code>up</code>, <code>move</code>, <code>over</code>, <code>out</code>, <code>enter</code> и <code>leave</code>).</p>

<p>Ниже представлено короткое описание для каждого типа события и связанный {{domxref("GlobalEventHandlers","Глобальный обработчик события")}}.</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Событие</th>
   <th scope="col">Обработчик события</th>
   <th scope="col">Описание</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{event('pointerover')}}</td>
   <td>{{domxref('GlobalEventHandlers.onpointerover','onpointerover')}}</td>
   <td>Вызывается, когда указатель появляется в пределах элемента (его <a href="#term_hit_test">теста попадания</a>).</td>
  </tr>
  <tr>
   <td>{{event('pointerenter')}}</td>
   <td>{{domxref('GlobalEventHandlers.onpointerenter','onpointerenter')}}</td>
   <td>Вызывается, когда указатель перемещается в пределы элемента (его <a href="#term_hit_test">теста попадания</a>) или одного из его потомков, в том числе в результате события <code>pointerdown</code> с устройства, которе не поддерживает наведение "hover" (смотрите <code>pointerdown</code>).</td>
  </tr>
  <tr>
   <td>{{event('pointerdown')}}</td>
   <td>{{domxref('GlobalEventHandlers.onpointerdown','onpointerdown')}}</td>
   <td>Вызывается, когда указатель принимает состояние активных кнопок.</td>
  </tr>
  <tr>
   <td>{{event('pointermove')}}</td>
   <td>{{domxref('GlobalEventHandlers.onpointermove','onpointermove')}}</td>
   <td>Вызывается, когда изменяются координаты указателя. Это событие также используется, если изменение состояния указателя нельзя сообщить с помощью других событий.</td>
  </tr>
  <tr>
   <td>{{event('pointerup')}}</td>
   <td>{{domxref('GlobalEventHandlers.onpointerup','onpointerup')}}</td>
   <td>Вызывается, когда указатель теряет состояние <em>активных кнопок</em>.</td>
  </tr>
  <tr>
   <td>{{event('pointercancel')}}</td>
   <td>{{domxref('GlobalEventHandlers.onpointercancel','onpointercancel')}}</td>
   <td>Браузер вызывает это событие, если приходит к выводу, что указывающее устройство больше не сможет генерировать события (например, если устройство деактивировано).</td>
  </tr>
  <tr>
   <td>{{event('pointerout')}}</td>
   <td>{{domxref('GlobalEventHandlers.onpointerout','onpointerout')}}</td>
   <td>Вызывается по нескольким причинам, в том числе: когда указывающее устройство перемещается за пределы элемента (его <a href="#term_hit_test">теста попадания</a>); запуск события <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">pointerup</span></font> для устройства, которое не поддерживает наведение "hover"; после запуска события <code>pointercancel</code>; когда перо покидает область обнаружения планшетом наведения указателя.</td>
  </tr>
  <tr>
   <td>{{event('pointerleave')}}</td>
   <td>{{domxref('GlobalEventHandlers.onpointerleave','onpointerleave')}}</td>
   <td>Вызывается, когда указывающее устройство перемещается за пределы элемента (его <a href="#term_hit_test">теста попадания</a>). Для устройств, подобных перу, это событие вызывается, когда перо покидает область обнаружения планшетом наведения указателя.</td>
  </tr>
  <tr>
   <td>{{event('gotpointercapture')}}</td>
   <td>{{domxref('GlobalEventHandlers.ongotpointercapture','ongotpointercapture')}}</td>
   <td>Вызывается, когда элемент получает захват указывающего устройства.</td>
  </tr>
  <tr>
   <td>{{event('lostpointercapture')}}</td>
   <td>{{domxref('GlobalEventHandlers.onlostpointercapture','onlostpointercapture')}}</td>
   <td>Запускается после того, как указывающее устройство потеряло захват.</td>
  </tr>
 </tbody>
</table>

<h3 id="Расширения_элемента">Расширения элемента</h3>

<p>Существует три расширения интерфейса {{domxref("Element")}}:</p>

<dl>
 <dt>{{domxref("Element.setPointerCapture()","setPointerCapture()")}}</dt>
 <dd>Определяет определённый элемент в качестве цели захвата для будущих событий указателя.</dd>
 <dt>{{domxref("Element.releasePointerCapture()","releasePointerCapture()")}}</dt>
 <dd>Этот метод освобождает (прекращает) захватывание указывающим устройством, которое ранее было установлено для определённого события указателя.</dd>
</dl>

<h3 id="Расширение_навигатора">Расширение навигатора</h3>

<p>Свойство {{domxref("Navigator.maxTouchPoints")}} используется для определения максимального количества одновременных точек касания, которые поддерживаются в каждый момент времени.</p>

<h2 id="Примеры">Примеры</h2>

<p>Этот раздел содержит примеры базового использования интерфейсов событий указывающего устройства.</p>

<h3 id="Назначение_обработчиков_событий">Назначение обработчиков событий</h3>

<p>В этом примере определённому элементу назначаются обработчики каждого типа события.</p>

<pre class="brush: html notranslate">&lt;html&gt;
  &lt;script&gt;
    function over_handler(event) { }
    function enter_handler(event) { }
    function down_handler(event) { }
    function move_handler(event) { }
    function up_handler(event) { }
    function cancel_handler(event) { }
    function out_handler(event) { }
    function leave_handler(event) { }
    function gotcapture_handler(event) { }
    function lostcapture_handler(event) { }

    function init() {
      var el=document.getElementById("target");
      // Register pointer event handlers
      el.onpointerover = over_handler;
      el.onpointerenter = enter_handler;
      el.onpointerdown = down_handler;
      el.onpointermove = move_handler;
      el.onpointerup = up_handler;
      el.onpointercancel = cancel_handler;
      el.onpointerout = out_handler;
      el.onpointerleave = leave_handler;
      el.gotpointercapture = gotcapture_handler;
      el.lostpointercapture = lostcapture_handler;
    }
  &lt;/script&gt;
  &lt;body onload="init();"&gt;
    &lt;div id="target"&gt; Touch me ... &lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;
</pre>

<h3 id="Свойства_события">Свойства события</h3>

<p>Этот пример демонстрирует доступ ко всем свойствам события касания.</p>

<pre class="brush: html notranslate">&lt;html&gt;
  &lt;script&gt;
    var id = -1;

    function process_id(event) {
      // Обработка этого события на основе идентификатора события
    }
    function process_mouse(event) {
      // Обработка события мыши
    }
    function process_pen(event) {
      // Обработка события пера
    }
    function process_touch(event) {
      // Обработка события касания
    }
    function process_tilt(tiltX, tiltY) {
      // Обработчик данных наклона
    }
    function process_pressure(pressure) {
      // Обработчик давления
    }
    function process_non_primary(event) {
      // Не основной обработчик
    }

    function down_handler(ev) {
      // Вычислить область контакта точки касания
      var area = ev.width * ev.height;

      // Сравнить сохранённый ID с ID данного события и соответствующим образом обработать
      if (id == ev.identifier) process_id(ev);

      // Вызвать обработчик нужного типа указателя
      switch (ev.pointerType) {
        case "mouse":
          process_mouse(ev);
          break;
        case "pen":
          process_pen(ev);
          break;
        case "touch":
          process_touch(ev);
          break;
        default:
          console.log("pointerType " + ev.pointerType + " is Not suported");
      }

      // Вызвать обработчик наклона
      if (ev.tiltX != 0 &amp;&amp; ev.tiltY != 0) process_tilt(ev.tiltX, ev.tiltY);

      // Вызвать обработчик давления
      process_pressure(ev.pressure);

      // Если это события не является основным, то вызвать не основной обработчик
      if (!ev.isPrimary) process_non_primary(ev);
    }

    function init() {
      var el=document.getElementById("target");
      // Назначение обработчика события "pointerdown"
      el.onpointerdown = down_handler;
    }
  &lt;/script&gt;
  &lt;body onload="init();"&gt;
    &lt;div id="target"&gt; Touch me ... &lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;
</pre>

<h2 id="Определение_Основного_Указателя">Определение Основного Указателя</h2>

<p>В некоторых сценариях может быть несколько указывающих устройств (например, устройство с сенсорным экраном и мышкой) или указывающее устройство, поддерживающее несколько контактных точек (например, сенсорный экран, который поддерживает касания несколькими пальцами). Приложение может использовать свойство {{domxref("PointerEvent.isPrimary","isPrimary")}} для определения главного указателя среди набора активных точек каждого указателя. Если будет решено поддерживать только основной указатель, в приложении можно игнорировать все события указателя, не являющегося главным.</p>

<p>У мышки может только один указатель, поэтому он всегда будет главным. Для сенсорного ввода указатель считается главным, если при этом нет других активных касаний. Для ввода пером или стилусом, указатель считается главным, если при этом нет касаний другими перьями.</p>

<h2 id="Определение_состояний_кнопок">Определение состояний кнопок</h2>

<p>Некоторые указывающие устройства, такие как мышь или перо, поддерживают несколько кнопок, и эти кнопки могут нажиматься одновременно. Например, нажатие кнопки, когда другая кнопка на устройстве уже нажата.</p>

<p>Для определения состояния нажатия кнопки, события указателя используют свойства {{domxref("MouseEvent.button","button")}} и {{domxref("MouseEvent.buttons","buttons")}} интерфейса {{domxref("MouseEvent")}}, от которого наследуется от{{domxref("PointerEvent")}}.</p>

<p>В следующей таблице приведены значения <code>button</code> и <code>buttons</code> для различных состояний кнопок устройства.</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Состояние кнопок устройства</th>
   <th scope="col">button</th>
   <th scope="col">buttons</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>С последнего события не было ни нажатия кнопок, ни касания пера</td>
   <td><code>-1</code></td>
   <td>—</td>
  </tr>
  <tr>
   <td>Мышь перемещается без нажатых кнопок.<br>
    Перо перемещается над планшетом в режиме "hover" без нажатых кнопок</td>
   <td>—</td>
   <td><code>0</code></td>
  </tr>
  <tr>
   <td>Левая кнопка мыши, Касание пальцем, Касание пером</td>
   <td><code>0</code></td>
   <td><code>1</code></td>
  </tr>
  <tr>
   <td>Средняя кнопка мыши</td>
   <td><code>1</code></td>
   <td><code>4</code></td>
  </tr>
  <tr>
   <td>Правая кнопка мыши, Кнопка пера</td>
   <td><code>2</code></td>
   <td><code>2</code></td>
  </tr>
  <tr>
   <td>Кнопка мыши X1 (назад)</td>
   <td><code>3</code></td>
   <td><code>8</code></td>
  </tr>
  <tr>
   <td>Кнопка мыши X2 (вперёд)</td>
   <td><code>4</code></td>
   <td><code>16</code></td>
  </tr>
  <tr>
   <td>Кнопка пера "ластик"</td>
   <td><code>5</code></td>
   <td><code>32</code></td>
  </tr>
 </tbody>
</table>

<div class="blockIndicator note">
<p><strong>Примечание:</strong> Свойство <code>button</code> указывает на изменение состояния кнопки. Однако, как и в случае с касанием, когда одно событие влечёт за собой ещё несколько событий, все они имеют одинаковое значение.</p>
</div>

<h2 id="Pointer_capture">Pointer capture</h2>

<p>Pointer capture allows events for a particular {{domxref("PointerEvent","pointer event")}} to be re-targeted to a particular element instead of the normal <a href="#term_hit_test">hit test</a> at a pointer's location. This can be used to ensure that an element continues to receive pointer events even if the pointer device's contact moves off the element (for example by scrolling).</p>

<p>The following example shows pointer capture being set on an element.</p>

<pre class="brush: html notranslate">&lt;html&gt;
&lt;script&gt;
  function downHandler(ev) {
    let el = document.getElementById("target");
    // Element 'target' will receive/capture further events
    el.setPointerCapture(ev.pointerId);
  }

  function init() {
    let el = document.getElementById("target");
    el.onpointerdown = downHandler;
  }
&lt;/script&gt;
&lt;body onload="init();"&gt;
  &lt;div id="target"&gt; Touch me ... &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>

<p>The following example shows a pointer capture being released (when a {{event("pointercancel")}} event occurs. The browser does this automatically when a {{event("pointerup")}} or {{event("pointercancel")}} event occurs.</p>

<pre class="brush: html notranslate">&lt;html&gt;
  &lt;script&gt;
    function downHandler(ev) {
      let el = document.getElementById("target");
      // Element "target" will receive/capture further events
      el.setPointerCapture(ev.pointerId);
    }

    function cancelHandler(ev) {
      let el = document.getElementById("target");
      // Release the pointer capture
      el.releasePointerCapture(ev.pointerId);
    }

    function init() {
      let el = document.getElementById("target");
      // Register pointerdown and pointercancel handlers
      el.onpointerdown = downHandler;
      el.onpointercancel = cancelHandler;
    }
  &lt;/script&gt;
  &lt;body onload="init();"&gt;
    &lt;div id="target"&gt; Touch me ... &lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;
</pre>

<h2 id="touch-action_CSS_property">touch-action CSS property</h2>

<p>The {{cssxref("touch-action")}} CSS property is used to specify whether or not the browser should apply its default (<em>native</em>) touch behavior (such as zooming or panning) to a region. This property may be applied to all elements except: non-replaced inline elements, table rows, row groups, table columns, and column groups.</p>

<p>A value of <code>auto</code> means the browser is free to apply its default touch behavior (to the specified region) and the value of <code>none</code> disables the browser's default touch behavior for the region. The values <code>pan-x</code> and <code>pan-y</code>, mean that touches that begin on the specified region are only for horizontal and vertical scrolling, respectively. The value <code>manipulation</code> means the browser may consider touches that begin on the element are only for scrolling and zooming.</p>

<p>In the following example, the browser's default touch behavior is disabled for the <code>div</code> element.</p>

<pre class="brush: html notranslate">&lt;html&gt;
  &lt;body&gt;
    &lt;div style="touch-action:none;"&gt;Can't touch this ... &lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;
</pre>

<p>In the following example, default touch behavior is disabled for some <code>button</code> elements.</p>

<pre class="brush: css notranslate">button#tiny {
  touch-action: none;
}
</pre>

<p>In the following example, when the <code>target</code> element is touched, it will only pan in the horizontal direction.</p>

<pre class="brush: css notranslate">#target {
  touch-action: pan-x;
}
</pre>

<h2 id="Compatibility_with_mouse_events">Compatibility with mouse events</h2>

<p>Although the pointer event interfaces enable applications to create enhanced user experiences on pointer enabled devices, the reality is the vast majority of today's web content is designed to only work with mouse input. Consequently, even if a browser supports pointer events, the browser must still process mouse events so content that assumes mouse-only input will work as is without direct modification. Ideally, a pointer enabled application does not need to explicitly handle mouse input. However, because the browser must process mouse events, there may be some compatibility issues that need to be handled. This section contains information about pointer event and mouse event interaction and the ramifications for application developers.</p>

<p>The browser <em>may map generic pointer input to mouse events for compatibility with mouse-based content</em>. This mapping of events is called <em>compatibility mouse events</em>. Authors can prevent the production of certain compatibility mouse events by canceling the pointerdown event but note that:</p>

<ul>
 <li>Mouse events can only be prevented when the pointer is down.</li>
 <li>Hovering pointers (e.g. a mouse with no buttons pressed) cannot have their mouse events prevented.</li>
 <li>The <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code>, and <code>mouseleave</code> events are never prevented (even if the pointer is down).</li>
</ul>

<h2 id="Best_practices">Best practices</h2>

<p>Here are some <em>best practices</em> to consider when using pointer events:</p>

<ul>
 <li>Minimize the amount of work performed in event handlers.</li>
 <li>Add the event handlers to a specific target element (rather than the entire document or nodes higher up in the document tree).</li>
 <li>The target element (node) should be large enough to accommodate the largest contact surface area (typically a finger touch). If the target area is too small, touching it could result in firing other events for adjacent elements.</li>
</ul>

<h2 id="Specifications">Specifications</h2>

<table>
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('Pointer Events 3')}}</td>
   <td>{{Spec2('Pointer Events 3')}}</td>
   <td>Added new APIs for <code>getCoalescedEvent</code> and <code>getPredictedEvents</code>, new <code>pointerrawupdate</code> event, additional <code>touch-action</code> property values <code>pan-left</code>, <code>pan-right</code>, <code>pan-up</code>, <code>pan-down</code>.</td>
  </tr>
  <tr>
   <td>{{SpecName('Pointer Events 2')}}</td>
   <td>{{Spec2('Pointer Events 2')}}</td>
   <td>Adds <code>hasPointerCapture</code> method and clarifies more edge cases and dynamic scenarios. </td>
  </tr>
  <tr>
   <td>{{SpecName('Pointer Events')}}</td>
   <td>{{Spec2('Pointer Events')}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility"><span>Browser compatibility</span></h2>

<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.PointerEvent")}}</p>

<p>Some new values have been defined for the {{cssxref("touch-action", "CSS touch-action")}} property as part of the {{SpecName('Pointer Events 3')}} specification but currently those new values have limited implementation support.</p>

<h2 id="Demos_and_examples">Demos and examples</h2>

<ul>
 <li><a href="http://patrickhlauke.github.io/touch/">Touch/pointer tests and demos (by Patrick H. Lauke)</a></li>
</ul>

<h2 id="Community">Community</h2>

<ul>
 <li><a href="https://github.com/w3c/pointerevents">Pointer Events Working Group</a></li>
 <li><a href="http://lists.w3.org/Archives/Public/public-pointer-events/">Mail list</a></li>
 <li><a href="irc://irc.w3.org:6667/">W3C #pointerevents IRC channel</a></li>
</ul>

<h2 id="Related_topics_and_resources">Related topics and resources</h2>

<ul>
 <li><a href="http://www.w3.org/TR/touch-events/">Touch Events Standard</a></li>
</ul>