Kā izmantot rādītāja notikumus JavaScript

Key Takeaways

• Tīmekļa lietojumprogrammām ir jāatbalsta dažādas ievades ierīces, nevis tikai pele, lai nodrošinātu plašāku auditoriju.
• Rādītāja notikumi JavaScript apstrādā gan peles, gan pieskārienu notikumus, tādējādi novēršot nepieciešamību tos ieviest atsevišķi.
• Rādītāja notikumiem ir līdzīgi nosaukumi un funkcionalitāte kā peles notikumiem, kas atvieglo esošā koda atjaunināšanu, lai atbalstītu pieskārienu un pildspalvas ievadi.

Daudzas tīmekļa lietojumprogrammas pieņem, ka lietotāja rādītājierīce būs pele, tāpēc tās izmanto peles notikumus, lai apstrādātu mijiedarbības. Tomēr, pieaugot skārienekrāna ierīcēm, lietotājiem nav nepieciešama pele, lai mijiedarbotos ar vietnēm. Ir svarīgi atbalstīt dažādas ievades ierīces, lai nodrošinātu pēc iespējas plašāku auditoriju.

JavaScript ir jaunāks standarts, ko sauc par rādītāju notikumiem. Tas apstrādā gan peles, gan pieskārienu notikumus, tāpēc jums nav jāuztraucas par to ieviešanu atsevišķi.

Kas ir rādītāja notikumi?

Rādītāja notikumi ir tīmekļa standarts, kas definē vienotu veidu, kā tīmekļa pārlūkprogrammā apstrādāt dažādas ievades metodes, tostarp peli, pieskārienu un pildspalvu. Šie notikumi nodrošina konsekventu un no platformas neatkarīgu veidu, kā mijiedarboties ar tīmekļa saturu dažādās ierīcēs.

Īsumā, rādītāja notikumi palīdz pārvaldīt šo lietotāju mijiedarbības grupu neatkarīgi no avota.

Rādītāja notikumu veidi

Rādītāja notikumi tiek nosaukti līdzīgi tiem peles notikumiem, kas, iespējams, jau ir pazīstami. Katram peleNotikums JavaScript ir atbilstošs pointerEvent. Tas nozīmē, ka varat atkārtoti skatīt savu veco kodu un pārslēgt “peli” uz “rādītāju”, lai sāktu atbalstīt skārienjutīgu un pildspalvas ievadi.

Šajā tabulā ir parādīti dažādi rādītāja notikumi salīdzinājumā ar peles notikumiem:

Var redzēt, ka ir trīs papildu rādītāja notikumi bez atbilstošiem peles notikumiem. Par šiem notikumiem uzzināsiet vēlāk.

Rādītāja notikumu izmantošana JavaScript

Rādītāja notikumus var izmantot tāpat kā peles notikumus. Tāpat kā lielākā daļa notikumu apstrādes, process parasti notiek pēc šādas shēmas:

1. Izmantojiet DOM atlasītāju lai atnestu elementu.
2. Izmantojot addEventListener metodi, norādiet jūs interesējošo notikumu un atzvanīšanas funkciju.
3. Izmantojiet atzvanīšanas argumenta īpašības un metodes, an Pasākums objektu.

Tālāk ir sniegts piemērs notikuma pointermove izmantošanai:

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

Šis koda bloks definē mērķa elementu un JavaScript funkcija rīkoties ar pointermove notikumu, tad tas izmanto a JavaScript notikumu klausītājs lai mērķa elementam pievienotu rādītāja notikumu un funkciju.

Izmantojot šo kodu, elements ar “mērķa” ID parādīs rādītāja koordinātas, kad pārvietojat kursoru, pirkstu vai pildspalvu virs tā:

Tādā pašā veidā varat izmantot citus rādītāja notikumus.

Rādītāja atcelšanas notikums

Rādītāja atcelšanas notikums tiek aktivizēts, kad tiek pārtraukts cits rādītāja notikums, pirms tas pabeidz savu darbību, kā sākotnēji paredzēts. Parasti pārlūkprogramma atceļ jebkuru rādītāja notikumu, kas varētu būt bijis darbībā iepriekš. Ir daudz iemeslu, kāpēc a rādītājsatcelt notikums var izraisīt, piemēram:

• Kad lietotājs saņem tālruņa zvanu vai citu traucējošu paziņojumu, velkot elementu pa ekrānu.
• Kad mainās ierīces orientācija.
• Kad pārlūkprogrammas logs zaudē fokusu.
• Kad lietotājs pārslēdzas uz citu cilni vai lietojumprogrammu.

Ar rādītājsatcelt notikumu, varat rīkoties šajās situācijās, kā vien vēlaties. Šeit ir piemērs:

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

Rādītāja tveršana

Rādītāja tveršana ir funkcija, kas ļauj noteiktam HTML elements tver un reaģē uz visiem rādītāja notikumiem konkrētam rādītājam, pat ja šie notikumi notiek ārpus elementa robežas.

Varat iestatīt rādītāja uztveršanu elementam, izmantojot setpointercapture() metodi un atlaidiet rādītāja tveršanu ar releasepointercapture() metodi.

The gotpointercapture un pazaudēts rādītājs rādītāja notikumi ir noderīgi rādītāju tveršanai.

Gotpointercapture notikums

The gotpointercapture notikums tiek aktivizēts ikreiz, kad elements iegūst rādītāja uztveršanu. Varat izmantot šo notikumu, lai inicializētu sava HTML elementa stāvokli, lai apstrādātu rādītāja notikumus. Piemēram, zīmēšanas lietojumprogrammā varat izmantot gotpointercapture notikumu, lai iestatītu kursora sākotnējo pozīciju.

Lostpointercapture notikums

The pazaudēts rādītājs notikums tiek aktivizēts, kad elements zaudē rādītāja uztveršanu. Varat to izmantot, lai notīrītu vai noņemtu jebkuru stāvokli, kas izveidots, kad elements ieguva rādītāja uztveršanu. Zīmēšanas lietojumprogrammā, iespējams, vēlēsities izmantot pazaudēts rādītājs lai paslēptu kursoru.

Rādītāja notikumu īpašības

Rādītāja pasākumiem ir īpašības, kas palīdzēs padarīt jūsu vietni interaktīvāku un atsaucīgāku. Peles notikumu rekvizīti ir tādi paši kā rādītāja notikumi, kā arī daži papildu rekvizīti. Šajā rakstā ir izskaidroti daži papildu rekvizīti.

PointerId īpašums

The rādītāja ID ir rādītāja notikuma rekvizīts, kas palīdz identificēt katru unikālo rādītāja ievadi, piemēram, irbuli, pirkstu vai peli. Katra rādītāja ievade iegūst unikālu ID (automātiski ģenerē pārlūkprogramma), kas ļaus jums izsekot un veikt darbības ar tiem.

Lielisks lietojums, lai rādītāja ID Īpašums ir spēļu lietojumprogramma, kurā lietotāji vienlaikus izmanto vairākus pirkstus vai irbuli. The rādītāja ID Īpašums ļauj izsekot katrai rādītāja virsmai, piešķirot katrai no tām unikālu ID. Primārais ID tiek piešķirts pirmajai rādītāja ievadei.

Šis īpašums ir īpaši noderīgs skārienierīcēm. Ierīcēm, kas izmanto peles rādītājus, vienlaikus var būt tikai viena rādītāja ievade, ja tām nav pievienota ārēja ierīce.

Šeit ir vienkāršs piemērs, kas izdrukā katras konsolē ievadītās rādītāja ID:

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 īpašums

Rekvizīts pointerType palīdz atšķirt dažāda veida rādītāja ievades un ļauj veikt darbības, pamatojoties uz tiem. Varat atšķirt peli, pildspalvu un pirkstu pieskārienu. Šim rekvizītam var būt tikai viena no trim virknes ievadēm: “mouse”, “pen” vai “touch”. Šeit ir vienkāršs piemērs, kā izmantot pointerType īpašums:

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

Platuma un augstuma īpašības

Šīs īpašības atspoguļo rādītāja kontakta laukuma platumu un augstumu milimetros. Dažas pārlūkprogrammas tos neatbalsta, un šādās pārlūkprogrammās to vērtība vienmēr būs 1.

Labs šo rekvizītu izmantošanas gadījums būs lietojumprogrammās, kurām nepieciešama precīza ievade vai ir jānošķir dažādu ievades lielumi. Piemēram, zīmēšanas lietojumprogrammā lielāks augstums un platums var nozīmēt, ka lietotājs zīmē ar plašāku gājienu un otrādi.

Visbiežāk pieskāriena notikumiem izmantosit platuma un augstuma rekvizītus.

Izmantojiet Pointer Events lielākai iekļautībai

Rādītāja pasākumi ļauj nodrošināt plašu ierīču un ievades veidu klāstu bez liela stresa. Jums tie vienmēr ir jāizmanto savās lietojumprogrammās, lai tie atbilstu mūsdienu standartiem un palīdzētu veidot labāku tīmekli.