Pointer Events API: обработка тач-событий

С каждым днём трафик со смартфонов и планшетов неумолимо растёт. Именно поэтому разработчики веб ресурсов должны обеспечить данной категории пользователей все средства взаимодействия, характерные для мобильных устройств. Обработчики событий click и hover остаются актуальными для тех кто пользуется мышкой.

К счастью на горизонте показалось новое API, которое обеспечивает как работу мыши, так и тач событий, а также взаимодействия со стилусом. Называется сие чудо Pointer events. С помощью данного API можно обеспечить обработку событий вышеупомянутых устройств.

Встречайте новые события

Новый Pointer Event API — это расширенная версия интерфейса Mouse Event. Добавлена поддержка мультитач событий, прикосновение стилуса и других операций.

• pointerdown — активация
• pointerup — деактивация
• pointerover, pointerenter — вход в границу элемента
• pointerout, pointerleave — выход из границ элемента
• pointermove — передвижение в пределах элемента
• pointercancel — отключение генерации событий
• gotpointercapture — перемещение элемента
• lostpointercapture — завершение взаимодействия

У большинства событий нового Pointer Events есть эквиваленты для работы с мышью:

const button = document.querySelector("button");

// Вместо mouseover
button.addEventListener('mouseover', doSomething);

// Используем pointerover
button.addEventListener('pointerover', doSomething);

Обработчик в данном случае один на два события.

Определение типа взаимодействия

Ещё одной фишкой Pointer Events API является то, что мы можем определить каким именно способом пользователь взаимодействует с элементами страницы.

button.addEventListener('pointereover', function(ev){
  switch(ev.pointerType) {
    case 'mouse':
      // Мышка.
      break;
    case 'touch':
      // Тачскрин.
      break;
    case 'pen':
      // стилус.
      break;
    default:
      // Невозможно определить.
      break;
  }
});

Другие свойства

Интерфейс Pointer Events напичкан и другими интересными настройками, включая те, что есть в MouseEvent:

• pointerId — Уникальный ID указателя, провоцирующего событие.
• width и height — Размеры зоны в пикселях.
• pressure — Уровень нажатия, если поддерживается устройством.
• tiltX и tiltY — Угол наклона стилуса во время прикосновения.
• isPrimary — Определяет было ли событие вызвано первичным указателем (для мультитач).

Браузерная поддержка

Pointer Events — это нововведение, поэтому ещё не все браузеры осуществляют его поддержку. Полная совместимость с Chrome, Edge, IE и Opera. С Firefox и Safari нет.

Проверить доступность Pointer Events API можно в объекте window:

if (window.PointerEvent) {
  // есть поддержка
} else {
  // нет поддержки
}

Также вы можете воспользоваться pollyfill-ом для тех браузеров, которые не поддерживают работу с данным API.

Итог

Несмотря на то, что Pointer Events API ещё не совместим со всеми браузерами его потенциал намного выше обычных способов обработки событий мыши: множество новых фишек позволит разработчикам создавать более интересные веб приложения.

Более подробную информацию о Power Events API можно найти на следующих ресурсах:

• Pointing the Way Forward — статья от Google Developers
• Pointer Events – Level 2
• Pointer Events on MDN