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
Просмотров: 1144
Правила перепечатки


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

  • AJAX и PHP: загрузка файла

    Пример того как осуществить загрузку файла через PHP и jQuery ajax.

  • CardInfo.js — отображение банковской карты

    CardInfo.js позволяет по номеру карты получить логотип банка, фирменные цвета и прочие детали. В базе сейчас 49 самых популярных российских банков. Вскоре будут добавлены банки США, Канады, Англии, Австралии и Новой Зеландии.

  • Работа с Chart.js: Первое знакомство

    Chart.js — это популярный инструмент, который предназначен для создания графиков и диаграмм. В данной серии уроков будут раскрыты все аспекты работы с этой библиотекой.

  • Меняем jQuery Ready() на чистый JavaScript

    Время идёт и меняется подход к различным вещам. С развитием JavaScript и выходом новых библиотек привычные вещи, такие как вызов $(document).ready(function(){}); становятся неактуальны.

  • Создание фейкового REST API с помощью json-server-а

    В этом уроке, с помощью json-server-а вы научитесь создавать и взаимодействовать с фейковым REST API, который будет полезен при разработке как мобильных, так и веб приложений.

^ Наверх ^