• “Обработка событий Мыши и Сенсорного ввода с Pointer Events API”
  • Встречайте новые события
  • Recognizing Input Type
  • Other Properties
  • Поддержка браузеров
  • Вывод

“Обработка событий Мыши и Сенсорного ввода с Pointer Events API”

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

К счастью, появился новый API, который поможет нам удовлетворить потребность пользователей в мыши, сенсорным устройством и стилусом. Его имя - Pointer events (Не путать с CSS property из за схожести в названии), и это позволяет нам добавлять обработчики событий, которые лучше подходят для работы со всеми типами ввода данных.

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

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

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

Большинство событий курсора имеют прямые альтернативы среди старых событий мыши. После того, как новый API получит полную поддержку браузера, мы сможем заменить его более современными альтернативами:

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

// Instead of mouseover
button.addEventListener('mouseover', doSomething);

// We can use pointerover
button.addEventListener('pointerover', doSomething);

Взаимодействие с мышью должно быть одинаковым в обоих случаях. Однако, использование прикосновений пальцев или стилуса будет проще программировать с помощью нового API.

Recognizing Input Type

Удивительной особенностью Pointer Events API является то, что он может определить, какой тип ввода был использован. Это может быть полезно, если вы хотите проигнорировать некоторые из методов ввода или предоставить специальную обратную связь для каждого из них.

button.addEventListener('pointereover', function(ev){
  switch(ev.pointerType) {
    case 'mouse':
      // The used device is a mouse or trackpad.
      break;
    case 'touch':
      // Input via touchscreen.
      break;
    case 'pen':
      // Stylus input.
      break;
    default:
      // Browser can't recognize the used device.
      break;
  }
});

Other Properties

Интерфейс Pointer Events также предоставляет некоторые другие интересные данные. Он включает все MouseEvent свойства плюс следующие:

• pointerId – Уникальный идентификатор указателя, вызывающего событие.
• width и height – Размер области контакта в пикселях.
• pressure – Давление прикосновения, если таковое имеется.
• tiltX и tiltY – Угол, при котором стилус прикасается к экрану.
• isPrimary – Определяет, было ли событие выбрано основным устройством указателя.

Клики мыши всегда имеют ширину и высоту 1, а размер сенсорного экрана варьируется.

Поддержка браузеров

События указателя являются достаточно новыми, поэтому совместимость с браузером еще не совершенна. Chrome (настольные и мобильные), Edge, IE и Opera имеют полную поддержку; Firefox и Safari этого не делают.

Совместимость Pointer Events с браузерами можно проверить в Can I Use

Чтобы проверить, имеет ли браузер Pointer Events API, вы можете использовать объект window:

if (window.PointerEvent) {
  // Pointer Events enabled.
} else {
  // Pointer Events not supported
}

Популярный open-source pollyfill также доступен для тех, кто не хочет ждать полной поддержки во всех браузерах.

Вывод

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

Если вы хотите узнать больше об API Power Events, мы рекомендуем проверить эти ресурсы:

• Pointing the Way Forward – Статья на Google Developers
• Pointer Events – Level 2 – W3C редактор проектов
• Pointer Events on MDN

Оригинал статьи