Kaip naudoti žymiklio įvykius „JavaScript“.

Key Takeaways

• Žiniatinklio programos turėtų palaikyti įvairius įvesties įrenginius, o ne tik pelę, kad galėtų patenkinti platesnę auditoriją.
• „JavaScript“ žymiklio įvykiai apdoroja ir pelės, ir palietimo įvykius, todėl nereikia jų įdiegti atskirai.
• Žymeklio įvykių pavadinimai ir funkcionalumas yra panašūs kaip ir pelės įvykių, todėl esamą kodą lengva atnaujinti, kad būtų palaikoma lietimo ir rašiklio įvestis.

Daugelis žiniatinklio programų daro prielaidą, kad vartotojo žymeklio įrenginys bus pelė, todėl sąveikoms tvarkyti naudoja pelės įvykius. Tačiau didėjant jutiklinio ekrano įrenginiams, vartotojams nereikia pelės, kad galėtų bendrauti su svetainėmis. Labai svarbu palaikyti įvairius įvesties įrenginius, kad būtų galima patenkinti kuo platesnę auditoriją.

JavaScript turi naujesnį standartą, vadinamą rodyklės įvykiais. Jis tvarko ir pelės, ir lietimo įvykius, todėl jums nereikės jaudintis dėl jų įgyvendinimo atskirai.

Kas yra rodyklės įvykiai?

Žymeklio įvykiai yra žiniatinklio standartas, apibrėžiantis vieningą būdą, kaip tvarkyti skirtingus įvesties metodus žiniatinklio naršyklėje, įskaitant pelę, lietimą ir rašiklį. Šie įvykiai suteikia nuoseklų ir nuo platformos nepriklausomą būdą sąveikauti su žiniatinklio turiniu skirtinguose įrenginiuose.

Trumpai tariant, rodyklės įvykiai padeda valdyti šią naudotojo sąveikų grupę, neatsižvelgiant į šaltinį.

Rodyklės įvykių tipai

Žymeklio įvykiai pavadinti panašiai kaip pelės įvykiai, kuriuos galbūt jau žinote. Kiekvienam pelės įvykis „JavaScript“ yra atitinkamas pointerEvent. Tai reiškia, kad galite iš naujo peržiūrėti seną kodą ir pakeisti pelę į žymeklį, kad palaikytumėte lietimo ir rašiklio įvestį.

Šioje lentelėje rodomi skirtingi žymeklio įvykiai, palyginti su pelės įvykiais:

Matote, kad yra trys papildomi žymeklio įvykiai be atitinkamų pelės įvykių. Apie šiuos įvykius sužinosite vėliau.

Rodyklės įvykių naudojimas „JavaScript“.

Žymeklio įvykius galite naudoti taip pat, kaip ir pelės įvykius. Kaip ir dauguma įvykių tvarkymo, procesas paprastai vyksta pagal šį modelį:

1. Naudokite DOM parinkiklį atnešti elementą.
2. Naudojant addEventListener metodą, nurodykite jus dominantį įvykį ir atgalinio skambinimo funkciją.
3. Naudokite atšaukimo argumento savybes ir metodus, an Renginys objektas.

Štai pavyzdys naudojant pointermove įvykį:

// 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 kodo blokas apibrėžia tikslinį elementą ir „JavaScript“ funkcija tvarkyti pointermove įvykis, tada jis naudoja a JavaScript įvykių klausytojas norėdami pridėti žymeklio įvykį ir funkciją prie tikslinio elemento.

Naudojant šį kodą, elementas su „taikinio“ ID rodys žymeklio koordinates, kai perkelsite žymeklį, pirštą ar rašiklį ant jo:

Taip pat galite naudoti kitus žymiklio įvykius.

Rodyklė atšaukti įvykį

Rodyklės atšaukimo įvykis suaktyvinamas, kai kitas žymeklio įvykis pertraukiamas jam nebaigus veikti, kaip numatyta iš pradžių. Paprastai naršyklė atšaukia bet kokį žymeklio įvykį, kuris galėjo įvykti anksčiau. Yra daug priežasčių, kodėl a rodyklė atšaukti įvykis gali suaktyvinti, pavyzdžiui:

• Kai vartotojas, vilkdamas elementą per ekraną, gauna telefono skambutį ar kitą pertraukiantį pranešimą.
• Pasikeitus įrenginio orientacijai.
• Kai naršyklės langas netenka dėmesio.
• Kai vartotojas persijungia į kitą skirtuką arba programą.

Su rodyklė atšaukti įvykį, galite tvarkyti šias situacijas taip, kaip norite. Štai pavyzdys:

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

Rodyklės fiksavimas

Žymeklio fiksavimas yra funkcija, leidžianti konkrečiam HTML elementas užfiksuoti ir reaguoti į visus konkretaus rodyklės įvykius, net jei tie įvykiai įvyksta už elemento ribos.

Galite nustatyti elemento žymeklio fiksavimą naudodami setpointercapture() metodą ir atleiskite žymeklio fiksavimą naudodami releasepointercapture() metodas.

The gavo pointercapture ir prarastas rodyklės fiksavimas žymeklio įvykiai yra naudingi fiksuojant žymeklį.

„Gotpointercapture“ įvykis

The gavo pointercapture įvykis suaktyvinamas, kai elementas įgyja žymeklį. Šį įvykį galite naudoti norėdami inicijuoti HTML elemento būseną, kad būtų galima apdoroti žymiklio įvykius. Pavyzdžiui, piešimo programoje galite naudoti gavo pointercapture įvykį, kad nustatytumėte pradinę žymeklio padėtį.

Lospointercapture įvykis

The prarastas rodyklės fiksavimas įvykis suaktyvinamas, kai elementas praranda žymeklio fiksavimą. Galite naudoti jį norėdami išvalyti arba pašalinti bet kokią būseną, sukurtą elementui užfiksavus žymeklį. Piešimo programoje galbūt norėsite naudoti prarastas rodyklės fiksavimas norėdami paslėpti žymeklį.

Rodyklės įvykių savybės

Žymeklio įvykiai turi savybių, kurios padės padaryti svetainę interaktyvesnę ir interaktyvesnę. Pelės įvykių savybės yra tos pačios, kurias rasite žymeklio įvykiuose, taip pat kai kurios papildomos savybės. Šiame straipsnyje paaiškinamos kai kurios papildomos savybės.

PointerId ypatybė

The rodyklės ID yra žymeklio įvykio ypatybė, padedanti nustatyti kiekvieną unikalią žymeklio įvestį, pvz., rašiklį, pirštą ar pelę. Kiekviena žymeklio įvestis gauna unikalų ID (automatiškai sugeneruotą naršyklės), kuris leis jums stebėti ir atlikti su jais susijusias operacijas.

Puikiai tinka naudoti rodyklės ID nuosavybė yra žaidimų programa, kurioje vartotojai vienu metu naudoja kelis pirštus arba rašiklius. The rodyklės ID ypatybė leidžia sekti kiekvieną žymeklio paviršių, kiekvienam iš jų priskiriant unikalų ID. Pirminis ID priskiriamas pirmai žymeklio įvestis.

Ši savybė ypač naudinga jutikliniams įrenginiams. Įrenginiai, kurie remiasi pelės žymekliais, vienu metu gali turėti tik vieną žymeklio įvestį be išorinio įrenginio.

Štai paprastas pavyzdys, kuris atspausdina kiekvienos žymeklio įvesties į konsolę 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 ypatybė

Ypatybė pointerType padeda atskirti skirtingus žymeklio įvesties tipus ir leidžia pagal juos atlikti operacijas. Galite atskirti pelę, rašiklį ir piršto prisilietimą. Ši savybė gali turėti tik vieną iš trijų eilučių įvesties: „pelė“, „rašiklis“ arba „palietimas“. Štai paprastas pavyzdys, kaip naudoti pointerType nuosavybė:

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

Plotis ir aukštis Savybės

Šios savybės rodo žymeklio kontaktinės srities plotį ir aukštį milimetrais. Kai kurios naršyklės jų nepalaiko, o tokiose naršyklėse jų reikšmė visada bus 1.

Tinkamas šių savybių naudojimo atvejis bus programose, kurioms reikalinga tiksli įvestis arba reikia atskirti skirtingų įvesties dydžius. Pavyzdžiui, piešimo programoje didesnis aukštis ir plotis gali reikšti, kad vartotojas piešia plačiau ir atvirkščiai.

Dažniausiai prisilietimo įvykiams naudosite pločio ir aukščio ypatybes.

Naudokite rodyklės įvykius, kad gautumėte daugiau įtraukimo

Žymeklio įvykiai leidžia pritaikyti įvairius įrenginius ir įvesties tipus nepatiriant didelio streso. Visada turėtumėte juos naudoti savo programose, kad atitiktumėte šiuolaikinius standartus ir padėtumėte kurti geresnį žiniatinklį.