Как использовать события указателя в JavaScript

Ключевые выводы

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

Многие веб-приложения предполагают, что указательным устройством пользователя будет мышь, поэтому они используют события мыши для управления взаимодействиями. Однако с появлением устройств с сенсорным экраном пользователям не нужна мышь для взаимодействия с веб-сайтами. Крайне важно поддерживать широкий спектр устройств ввода, чтобы охватить как можно более широкую аудиторию.

В JavaScript есть новый стандарт, называемый событиями указателя. Он обрабатывает события как мыши, так и касания, поэтому вам не придется беспокоиться о реализации их отдельно.

Что такое события указателя?

События указателя — это веб-стандарт, определяющий унифицированный способ обработки различных методов ввода в веб-браузере, включая мышь, касание и перо. Эти события обеспечивают согласованный и независимый от платформы способ взаимодействия с веб-контентом на разных устройствах.

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

Типы событий указателя

События указателя называются так же, как и события мыши, с которыми вы, возможно, уже знакомы. Для каждого mouseEvent в JavaScript есть соответствующий указательСобытие. Это означает, что вы можете вернуться к своему старому коду и заменить «мышь» на «указатель», чтобы начать поддерживать сенсорный ввод и ввод с помощью пера.

В следующей таблице показаны различные события указателя по сравнению с событиями мыши:

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

Использование событий указателя в JavaScript

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

1. Используйте селектор DOM чтобы получить элемент.
2. Используя добавитьEventListener метод, укажите интересующее вас событие и функцию обратного вызова.
3. Используйте свойства и методы аргумента обратного вызова, Событие объект.

Вот пример использования события pointermove:

// Get the target element
const target = document.getElementById('target');
// Add an event listener to your target element
target.addEventListener('pointermove', handlePointerMove);
// Function to handle pointer move event
functionhandlePointerMove(ev) {
// Handle the event however you want to
 target.textContent = `Moved at x: ${ev.clientX}, y: ${ev.clientY}`;
}

Этот блок кода определяет целевой элемент и функция JavaScript справиться с указательперемещение событие, то он использует прослушиватель событий JavaScript чтобы прикрепить событие указателя и функцию к целевому элементу.

Используя этот код, элемент с «целевым» идентификатором будет отображать координаты указателя, когда вы наводите на него курсор, палец или перо:

Вы можете использовать другие события указателя таким же образом.

Событие pointercancel

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

• Когда пользователь получает телефонный звонок или другое прерывающее уведомление при перетаскивании элемента по экрану.
• При изменении ориентации устройства.
• Когда окно браузера теряет фокус.
• Когда пользователь переключается на другую вкладку или приложение.

С указательотмена событие, вы можете справиться с этими ситуациями, как захотите. Вот пример:

const target = document.getElementById('target');
target.addEventListener('pointercancel', (event) => {
// Handle the situation where the pointer cancels. For example, you
// can release the pointer capture
 target.releasePointerCapture(event.pointerId);
});

Захват указателя

Захват указателя — это функция, которая позволяет конкретному HTML-элемент захватывать и реагировать на все события указателя для конкретного указателя, даже если эти события происходят за пределами границы элемента.

Вы можете установить захват указателя для элемента с помощью setpointercapture() и отпустите захват указателя с помощью релизуказательзахват() метод.

GotPointerCapture и потерянный указательзахват События указателя полезны для захвата указателя.

Событие gotpointercapture

GotPointerCapture Событие срабатывает всякий раз, когда элемент получает захват указателя. Вы можете использовать это событие для инициализации состояния вашего HTML-элемента для обработки событий указателя. Например, в приложении для рисования вы можете использовать GotPointerCapture событие для установки начального положения курсора.

Событие LostpointerCapture

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

Свойства событий указателя

У событий указателя есть свойства, которые помогут вам сделать ваш веб-сайт более интерактивным и отзывчивым. Свойства событий мыши — это те же свойства, которые вы найдете в событиях указателя, плюс некоторые дополнительные свойства. В этой статье описаны некоторые дополнительные свойства.

Свойство pointerId

идентификатор указателя — это свойство события указателя, которое помогает идентифицировать каждый уникальный ввод указателя, например перо, палец или мышь. Каждый ввод указателя получает уникальный идентификатор (автоматически сгенерированный браузером), который позволит вам отслеживать и выполнять над ними операции.

Прекрасное применение для идентификатор указателя property — игровое приложение, в котором пользователи одновременно используют несколько пальцев или стилусов. идентификатор указателя Свойство позволяет отслеживать каждую поверхность указателя, присваивая каждой из них уникальный идентификатор. Первичный идентификатор присваивается первому входу указателя.

Это свойство особенно полезно для сенсорных устройств. Устройства, использующие указатели мыши, могут одновременно иметь только один вход указателя без подключения к ним какого-либо внешнего устройства.

Вот простой пример, который выводит идентификатор каждого указателя, введенного в консоль:

const target = document.getElementById('target');
target.addEventListener('pointerdown', (event) => {
console.log(`Pointer ID: ${event.pointerId}`);
// Handle the pointer down event for the specific pointerId
});

Свойство pointerType

Свойство pointerType помогает различать различные типы входных данных указателя и позволяет выполнять операции на их основе. Вы можете различать мышь, перо и прикосновение пальца. Это свойство может принимать только один из трех строковых входных данных: «мышь», «перо» или «касание». Вот простой пример того, как использовать тип указателя свойство:

functionhandlePointerEvent(event){
// Using the pointerType property
switch (event.pointerType) {
case'mouse':
// Handle the situation where the pointing device is a mouse
console.log(`Mouse Pointer ID: ${event.pointerId}`);
break;
case'pen':
// Handle the situation where the pointing device is a stylus
console.log(`Stylus Pointer ID: ${event.pointerId}`);
break;
case'touch':
// Handle the situation where the pointing device is a finger touch
console.log(`Touch Pointer ID: ${event.pointerId}`);
break;
default:
// Handle other pointer types or cases
console.log(`pointerType ${event.pointerType} is not supported`);
break;
 }
}
// Attach pointer events to elements
element.addEventListener('pointerdown', handlePointerEvent);

Свойства ширины и высоты

Эти свойства представляют ширину и высоту области контакта указателя в миллиметрах. Некоторые браузеры их не поддерживают, и в таких браузерах их значение всегда будет равно 1.

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

В большинстве случаев вы, скорее всего, будете использовать свойства ширины и высоты для событий касания.

Используйте события указателя для большей инклюзивности

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