Како користити догађаје показивача у ЈаваСцрипт-у

Кључне Такеаваис

• Веб апликације треба да подржавају низ улазних уређаја, а не само миша, како би задовољиле ширу публику.
• Догађаји показивача у ЈаваСцрипт-у управљају догађајима миша и додира, елиминишући потребу да се они засебно имплементирају.
• Догађаји показивача имају слична имена и функционалност као догађаји миша, што олакшава ажурирање постојећег кода да подржи уносе додиром и оловком.

Многе веб апликације претпостављају да ће показивачки уређај корисника бити миш, тако да користе догађаје миша за руковање интеракцијама. Међутим, са порастом уређаја са екраном осетљивим на додир, корисницима није потребан миш за интеракцију са веб локацијама. Неопходно је подржати низ улазних уређаја како би се задовољила најшира могућа публика.

ЈаваСцрипт има новији стандард који се зове догађаји показивача. Он управља и догађајима миша и додира, тако да не морате да бринете о њиховој имплементацији засебно.

Шта су показивачки догађаји?

Догађаји показивача су веб стандард који дефинише јединствен начин руковања различитим методама уноса у веб претраживачу, укључујући миш, додир и оловку. Ови догађаји обезбеђују доследан и платформски независан начин интеракције са веб садржајем на различитим уређајима.

Укратко, догађаји показивача вам помажу да управљате овом групом корисничких интеракција, без обзира на извор.

Типови показивача догађаја

Догађаји показивача се називају слично догађајима миша који су вам можда већ познати. За сваки моусеЕвент у ЈаваСцрипт-у постоји одговарајући поинтерЕвент. То значи да можете поново да посетите свој стари код и промените „миш“ за „показивач“ да бисте почели да подржавате уносе додиром и оловком.

Следећа табела приказује различите догађаје показивача у поређењу са догађајима миша:

Можете видети да постоје три додатна догађаја показивача без одговарајућих догађаја миша. О овим догађајима ћете сазнати касније.

Коришћење догађаја показивача у ЈаваСцрипт-у

Догађаје показивача можете користити на исти начин на који користите догађаје миша. Као и већина руковања догађајима, процес обично прати овај образац:

1. Користите ДОМ селектор да дохвати елемент.
2. Помоћу аддЕвентЛистенер метод, наведите догађај који вас занима и функцију повратног позива.
3. Користите својства и методе аргумента повратног позива, ан Догађај објекат.

Ево примера коришћења догађаја поинтермове:

// 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}`;
}

Овај блок кода дефинише циљни елемент и ЈаваСцрипт функција да се носи са поинтмове догађај онда користи а ЈаваСцрипт слушалац догађаја да бисте приложили догађај показивача и функцију циљном елементу.

Користећи овај код, елемент са „циљним“ ИД-ом ће приказати координате показивача када померите курсор, прст или оловку преко њега:

Можете користити друге догађаје показивача на исти начин.

Догађај поништавања показивача

Догађај поништавања показивача се покреће када се други догађај показивача прекине пре него што заврши своју операцију како је првобитно замишљено. Обично, претраживач поништава било који догађај показивача који је раније био у акцији. Постоји много разлога зашто А поинтерцанцел догађај може да покрене, на пример:

• Када корисник прими телефонски позив или неко друго ометајуће обавештење док превлачи елемент преко екрана.
• Када се оријентација уређаја промени.
• Када прозор претраживача изгуби фокус.
• Када корисник пређе на другу картицу или апликацију.

Са поинтерцанцел догађај, можете да се носите са овим ситуацијама како год желите. Ево примера:

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);
});

Поинтер Цаптуринг

Снимање показивача је функција која омогућава одређено ХТМЛ елемент ухвати и одговори на све догађаје показивача за одређени показивач, чак и ако се ти догађаји дешавају ван граница елемента.

Можете подесити хватање показивача за елемент помоћу сетпоинтерцаптуре() методу и отпустите снимање показивача помоћу релеасепоинтерцаптуре() методом.

Тхе готпоинтерцаптуре и лостпоинтерцаптуре Догађаји показивача су корисни за хватање показивача.

Догађај готпоинтерцаптуре

Тхе готпоинтерцаптуре догађај се покреће сваки пут када елемент добије хватање показивача. Можете да користите овај догађај да иницијализујете стање за ваш ХТМЛ елемент за руковање догађајима показивача. На пример, у апликацији за цртање, можете да користите готпоинтерцаптуре догађај за постављање почетне позиције курсора.

Догађај лостпоинтерцаптуре

Тхе лостпоинтерцаптуре догађај се покреће када елемент изгуби хватање показивача. Можете га користити да очистите или уклоните било које стање које је створено када је елемент ухватио показивач. У апликацији за цртање, можда бисте желели да користите лостпоинтерцаптуре да сакријете курсор.

Својства показивача догађаја

Догађаји показивача имају својства која ће вам помоћи да своју веб локацију учините интерактивнијом и прилагодљивијом. Својства догађаја миша су иста својства која ћете наћи у догађајима показивача, плус нека додатна својства. Овај чланак објашњава неке од додатних својстава.

ПоинтерИд својство

Тхе поинтИд је својство догађаја показивача које вам помаже да идентификујете сваки јединствени унос показивача, као што су оловка, прст или миш. Сваки унос показивача добија јединствени ИД (аутоматски генерисан од стране претраживача) који ће вам омогућити да пратите и извршавате операције на њима.

Одлична употреба за поинтИд проперти је апликација за игре у којој корисници истовремено користе више прстију или оловке. Тхе поинтИд Својство вам омогућава да пратите сваку површину показивача тако што ћете свакој од њих доделити јединствени ИД. Примарни ИД се додељује првом улазу показивача.

Ово својство је посебно корисно за уређаје на додир. Уређаји који се ослањају на показиваче миша могу имати само један улаз показивача у исто време без неког спољног уређаја повезаног на њих.

Ево једноставног примера који штампа ИД сваког уноса показивача на конзолу:

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

Својство поинтерТипе

Својство поинтерТипе вам помаже да разликујете различите типове уноса показивача и омогућава вам да изводите операције на основу њих. Можете направити разлику између миша, оловке и додира прстом. Ово својство може узети само један од три уноса низа: „миш“, „оловка“ или „додир“. Ево једноставног примера како да користите поинтерТипе имовина:

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 у таквим претраживачима.

Добар случај употребе ових својстава биће у апликацијама које захтевају прецизан унос или треба да разликују величине различитих улаза. На пример, у апликацији за цртање, већа висина и ширина могу значити да корисник црта ширим потезом и обрнуто.

Већину пута ћете вероватно користити својства ширине и висине за догађаје додира.

Користите Догађаје показивача за већу инклузивност

Догађаји показивача вам омогућавају да се побринете за широк спектар уређаја и типова уноса без великог стреса. Увек би требало да их користите у својим апликацијама да бисте били у складу са савременим стандардима и помогли у изградњи бољег веба.