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

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

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

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

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

У большинства событий нового 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 можно найти на следующих ресурсах:

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://tutorialzine.com/2017/04/handle-mouse-and-touch-input-with-the-pointer-events-api/
Перевел: Станислав Протасевич
Урок создан: 24 Апреля 2017
Просмотров: 1463
Правила перепечатки


5 последних уроков рубрики "jQuery"

^ Наверх ^