Как да използвате събития на указател в JavaScript

Ключови изводи

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

Много уеб приложения приемат, че посочващото устройство на потребителя ще бъде мишка, така че те използват събития на мишката, за да обработват взаимодействия. Въпреки това, с нарастването на устройствата със сензорен екран, потребителите не се нуждаят от мишка, за да взаимодействат с уебсайтове. От съществено значение е да поддържате набор от входни устройства, за да се погрижите за възможно най-широка аудитория.

JavaScript има по-нов стандарт, наречен събития на указателя. Той обработва както събития с мишка, така и събития с докосване, така че не е нужно да се притеснявате за прилагането им поотделно.

Какво представляват указателните събития?

Събитията с показалец са уеб стандарт, който дефинира унифициран начин за обработка на различни методи за въвеждане в уеб браузър, включително мишка, докосване и писалка. Тези събития предоставят последователен и независим от платформата начин за взаимодействие с уеб съдържание на различни устройства.

Накратко, указателните събития ви помагат да се справите с тази група потребителски взаимодействия, независимо от източника.

Видове указателни събития

Събитията с показалец се наименуват подобно на събитията с мишката, с които може би вече сте запознати. За всеки mouseEvent в JavaScript има съответен pointerEvent. Това означава, че можете да прегледате стария си код и да смените „мишка“ с „показател“, за да започнете да поддържате въвеждане с докосване и писалка.

Следната таблица показва различните събития на показалеца в сравнение със събитията на мишката:

Можете да видите, че има три допълнителни събития на показалеца без съответните събития на мишката. Ще научите за тези събития по-късно.

Използване на събития с показалец в JavaScript

Можете да използвате събития с показалец по същия начин, както използвате събития с мишката. Подобно на повечето обработки на събития, процесът обикновено следва този модел:

1. Използвайте DOM селектор за извличане на елемент.
2. Използвайки addEventListener метод, посочете събитието, което ви интересува, и функция за обратно извикване.
3. Използвайте свойства и методи на аргумента на обратното извикване, an Събитие обект.

Ето пример за използване на събитието 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 да се справят с преместване на показалеца събитие, тогава използва a JavaScript слушател на събития за да прикачите събитието на указателя и функцията към целевия елемент.

Използвайки този код, елемент с „целеви“ ID ще покаже координатите на показалеца, когато преместите курсора, пръста или писалката върху него:

Можете да използвате другите събития на показалеца по същия начин.

Събитието pointercancel

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

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

С указател отмяна събитие, можете да се справите с тези ситуации както искате. Ето един пример:

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() метод и освободете улавяне на указател с releasepointercapture() метод.

The gotpointercapture и lostpointercapture указателните събития са полезни за улавяне на указател.

Събитието gotpointercapture

The gotpointercapture събитие се задейства всеки път, когато даден елемент получи улавяне на указател. Можете да използвате това събитие, за да инициализирате състояние за вашия HTML елемент за обработка на събития с указател. Например в приложение за рисуване можете да използвате gotpointercapture събитие за задаване на началната позиция на курсора.

Събитието lostpointercapture

The lostpointercapture събитие се задейства, когато елемент загуби улавяне на указател. Можете да го използвате, за да изчистите или премахнете всяко състояние, създадено, когато елементът получи улавяне на указател. В приложение за рисуване може да искате да използвате lostpointercapture за да скриете курсора.

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

Събитията на указателя имат свойства, които ще ви помогнат да направите уебсайта си по-интерактивен и отзивчив. Свойствата на събитията с мишката са същите свойства, които ще намерите в събитията с указател, плюс някои допълнителни свойства. Тази статия обяснява някои от допълнителните свойства.

Свойството pointerId

The pointerId е свойство на събитие на показалеца, което ви помага да идентифицирате всяко уникално въвеждане на показалец, като стилус, пръст или мишка. Всеки въведен указател получава уникален идентификатор (автоматично генериран от браузъра), който ще ви позволи да го проследявате и да извършвате операции върху него.

Страхотна употреба за pointerId property е приложение за игри, при което потребителите използват едновременно множество пръсти или стилуси. The pointerId свойство ви позволява да следите всяка повърхност на показалеца, като присвоите уникален идентификатор на всяка от тях. Основният идентификатор се присвоява на първия вход на указателя.

Това свойство е особено полезно за сензорни устройства. Устройствата, които разчитат на указатели на мишката, могат да имат само един вход за указател в даден момент, без да е свързано външно устройство към тях.

Ето прост пример, който отпечатва идентификатора на всеки указател, въведен в конзолата:

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 ви помага да правите разлика между различните типове входове на указател и ви позволява да извършвате операции въз основа на тях. Можете да правите разлика между мишка, писалка и докосване с пръст. Това свойство може да приеме само един от трите входа на низ: „мишка“, „писалка“ или „докосване“. Ето един прост пример за това как да използвате 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 в такива браузъри.

Добър случай на използване на тези свойства ще бъде в приложения, които изискват точно въвеждане или е необходимо да се прави разлика между размерите на различните входове. Например, в приложение за рисуване, по-голямата височина и ширина може да означава, че потребителят рисува с по-широк щрих и обратното.

Повечето пъти вероятно ще използвате свойствата за ширина и височина за събития на докосване.

Използвайте събития с указател за повече приобщаване

Събитията с указател ви позволяват да обслужвате широка гама от устройства и типове въвеждане, без да преминавате през много стрес. Винаги трябва да ги използвате във вашите приложения, за да отговарят на съвременните стандарти и да помогнат за изграждането на по-добра мрежа.