Kako uporabljati dogodke kazalcev v JavaScriptu

Ključni zaključki

• Spletne aplikacije bi morale podpirati vrsto vnosnih naprav, ne le miške, da bi zadovoljile širšo publiko.
• Dogodki kazalca v JavaScriptu obravnavajo dogodke miške in dotika, kar odpravlja potrebo po njihovi ločeni implementaciji.
• Dogodki kazalca imajo podobna imena in funkcionalnost kot dogodki miške, kar olajša posodobitev obstoječe kode za podporo vnosov z dotikom in peresom.

Številne spletne aplikacije predvidevajo, da bo kazalna naprava uporabnika miška, zato za upravljanje interakcij uporabljajo dogodke miške. Vendar pa z naraščanjem naprav z zaslonom na dotik uporabniki ne potrebujejo miške za interakcijo s spletnimi mesti. Bistvenega pomena je podpreti vrsto vnosnih naprav, da lahko poskrbite za najširše možno občinstvo.

JavaScript ima novejši standard, imenovan kazalni dogodki. Obravnava dogodke miške in dotika, tako da vam ni treba skrbeti, da bi jih implementirali ločeno.

Kaj so dogodki kazalca?

Dogodki kazalca so spletni standard, ki določa poenoten način obravnavanja različnih metod vnosa v spletnem brskalniku, vključno z miško, dotikom in peresom. Ti dogodki zagotavljajo dosleden in od platforme neodvisen način interakcije s spletno vsebino v različnih napravah.

Na kratko, dogodki kazalca vam pomagajo upravljati to skupino uporabniških interakcij, ne glede na vir.

Vrste kazalnih dogodkov

Dogodki kazalca so poimenovani podobno kot dogodki miške, ki jih morda že poznate. Za vsako mouseEvent v JavaScriptu je ustrezen pointerEvent. To pomeni, da lahko znova obiščete svojo staro kodo in zamenjate »miško« za »kazalec«, da začnete podpirati vnose z dotikom in peresom.

Naslednja tabela prikazuje različne dogodke kazalca v primerjavi z dogodki miške:

Vidite lahko, da obstajajo trije dodatni dogodki kazalca brez ustreznih dogodkov miške. O teh dogodkih boste izvedeli kasneje.

Uporaba dogodkov kazalca v JavaScriptu

Dogodke kazalca lahko uporabljate na enak način kot dogodke miške. Kot večina obravnavanja dogodkov tudi postopek običajno sledi temu vzorcu:

1. Uporabite izbirnik DOM pridobiti element.
2. Uporabljati addEventListener način, določite dogodek, ki vas zanima, in funkcijo povratnega klica.
3. Uporabite lastnosti in metode argumenta povratnega klica, an Dogodek predmet.

Tu je primer uporabe dogodka 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}`;
}

Ta blok kode definira ciljni element in funkcijo JavaScript ravnati z premik kazalca dogodek, potem uporablja a poslušalec dogodkov JavaScript da pripnete dogodek kazalca in funkcijo na ciljni element.

Z uporabo te kode bo element z ID-jem »cilja« prikazal koordinate kazalca, ko nad njim premaknete kazalec, prst ali pero:

Druge dogodke kazalcev lahko uporabite na enak način.

Dogodek pointercancel

Dogodek preklic kazalca se sproži, ko je drug dogodek kazalca prekinjen, preden dokonča svoje delovanje, kot je bilo prvotno predvideno. Običajno brskalnik prekliče kateri koli dogodek kazalca, ki je morda že bil v akciji. Obstaja veliko razlogov, zakaj a pointercancel dogodek lahko sproži, na primer:

• Ko uporabnik med vlečenjem elementa po zaslonu prejme telefonski klic ali kakšno drugo moteče obvestilo.
• Ko se orientacija naprave spremeni.
• Ko okno brskalnika izgubi fokus.
• Ko uporabnik preklopi na drug zavihek ali aplikacijo.

z pointercancel dogodka, lahko te situacije rešite, kakor želite. Tukaj je primer:

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

Zajem kazalca

Zajem kazalca je funkcija, ki omogoča določeno element HTML zajemanje in odziv na vse dogodke kazalca za določen kazalec, tudi če se ti dogodki zgodijo zunaj meje elementa.

Za element lahko nastavite zajem kazalca z setpointercapture() in sprostite zajem kazalca z releasepointercapture() metoda.

The gotpointercapture in lostpointercapture dogodki kazalca so uporabni za zajem kazalca.

Dogodek gotpointercapture

The gotpointercapture dogodek se sproži vsakič, ko element pridobi zajem kazalca. Ta dogodek lahko uporabite za inicializacijo stanja za vaš element HTML za obravnavo dogodkov kazalca. Na primer, v aplikaciji za risanje lahko uporabite gotpointercapture dogodek za nastavitev začetnega položaja kazalca.

Dogodek lostpointercapture

The lostpointercapture dogodek se sproži, ko element izgubi zajem kazalca. Uporabite ga lahko za čiščenje ali odstranitev katerega koli stanja, ustvarjenega, ko je element pridobil zajem kazalca. V aplikaciji za risanje boste morda želeli uporabiti lostpointercapture da skrijete kazalec.

Lastnosti dogodkov kazalca

Dogodki kazalca imajo lastnosti, ki vam bodo pomagale narediti vaše spletno mesto bolj interaktivno in odzivno. Lastnosti dogodkov miške so enake lastnostim, ki jih boste našli v dogodkih kazalca, poleg nekaterih dodatnih lastnosti. Ta članek pojasnjuje nekatere dodatne lastnosti.

Lastnost pointerId

The kazalecId je lastnost dogodka kazalca, ki vam pomaga prepoznati vsak edinstven vnos kazalca, kot je pisalo, prst ali miška. Vsak vnos kazalca dobi edinstven ID (ki ga samodejno ustvari brskalnik), ki vam bo omogočil sledenje in izvajanje operacij na njih.

Odlična uporaba za kazalecId property je igralna aplikacija, kjer uporabniki hkrati uporabljajo več prstov ali pisal. The kazalecId vam omogoča, da sledite vsaki površini kazalca tako, da vsaki od njih dodelite edinstven ID. Primarni ID se dodeli prvemu vnosu kazalca.

Ta lastnost je še posebej uporabna za naprave na dotik. Naprave, ki se zanašajo na kazalce miške, imajo lahko samo en vhod kazalca naenkrat, ne da bi bila z njimi povezana zunanja naprava.

Tu je preprost primer, ki natisne ID vsakega vnosa kazalca v konzolo:

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

Lastnost pointerType

Lastnost pointerType vam pomaga razlikovati med različnimi vrstami vnosov kazalca in vam omogoča izvajanje operacij na podlagi njih. Razlikujete lahko med miško, peresom in dotikom s prstom. Ta lastnost lahko sprejme le enega od treh vnosov niza: »miška«, »pero« ali »dotik«. Tukaj je preprost primer, kako uporabljati pointerType lastnina:

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

Lastnosti širine in višine

Te lastnosti predstavljajo širino in višino kontaktne površine kazalca v milimetrih. Nekateri brskalniki jih ne podpirajo in njihova vrednost bo v takih brskalnikih vedno 1.

Dober primer uporabe teh lastnosti bo v aplikacijah, ki zahtevajo natančen vnos ali morajo razlikovati med velikostmi različnih vnosov. Na primer, v aplikaciji za risanje lahko večja višina in širina pomenita, da uporabnik riše s širšo potezo in obratno.

Večinoma boste verjetno uporabili lastnosti širine in višine za dogodke dotika.

Uporabite dogodke kazalcev za večjo vključenost

Dogodki kazalcev vam omogočajo, da poskrbite za širok nabor naprav in vrst vnosov, ne da bi pri tem šli skozi veliko stresa. Vedno jih uporabite v svojih aplikacijah, da bodo v skladu s sodobnimi standardi in pomagali zgraditi boljši splet.