Pointergebeurtenissen gebruiken in JavaScript
Belangrijkste conclusies
Om inclusiviteit en toegankelijkheid voor een bredere gebruikersgroep te garanderen, moeten webapplicaties worden ontworpen met verschillende invoermogelijkheden naast de traditionele muizen. Deze aanpak zorgt voor een grotere aanpasbaarheid aan individuele behoeften en voorkeuren en bevordert tegelijkertijd universele bruikbaarheid.
Door gebruik te maken van pointer-events in JavaScript kunnen zowel muis- als aanraakinteracties efficiënt worden afgehandeld, waardoor er geen aparte implementatieprocessen nodig zijn voor elk gebeurtenistype.
Het ontwerp van pointer-events in moderne webontwikkeling komt sterk overeen met dat van traditionele muisevents, waardoor het gemakkelijker wordt om bestaande broncode aan te passen voor gebruik van invoer via zowel een aanraakscherm als een stylus.
De opkomst van aanraakschermtechnologie heeft geleid tot een toenemende afhankelijkheid van vingergebaseerde invoer voor digitale interacties. Bijgevolg is het cruciaal voor moderne webontwikkelingspraktijken om diverse vormen van gebruikersinteractie te accommoderen en te faciliteren via verschillende invoerapparaten naast de traditionele muisgestuurde interfaces.
Door gebruik te maken van de recentere standaard die bekend staat als Pointer Events in JavaScript kunnen zowel muisgebaseerde als aanraakgebaseerde invoer naadloos worden geïntegreerd, waardoor afzonderlijke implementatieprocessen overbodig worden.
Wat zijn Pointer Events?
Pointer events vormen een universeel toepasbaar paradigma voor het beheren van verschillende invoermodaliteiten binnen een webbrowsercontext, en omvatten traditionele op cursor gebaseerde interfaces naast hedendaagse alternatieven zoals touchscreen- en stylus-gestuurde interacties. Deze samenhangende aanpak zorgt voor een naadloze interface met internetgebaseerde inhoud, ongeacht het gebruikte hardwareplatform.
In essentie faciliteren pointer events het beheer van een verzameling gebruikersinteracties, ongeacht hun oorsprong.
Soorten Pointer-events
Pointer-events lijken qua naam op de muis-events die je misschien al kent. Corresponderend met elke muisgebeurtenis in JavaScript is de bijbehorende pointergebeurtenis, die de conversie van “muis” naar “pointer” mogelijk maakt om aanraak- en peninvoerapparaten te ondersteunen.
De volgende grafiek toont een vergelijking van verschillende pointergebeurtenissen, afgezet tegen hun overeenkomstige muisevents:
Pointergebeurtenissen
|
Muisgebeurtenissen
-|-
pointerdown
|
mousedown
pointerup
|
mouseup
pointermove
|
mousemove
pointerleave
|
mouseleave
pointerover
|
mouseover
pointerenter
|
mouesenter
pointerout
|
mouseout
pointercancel
|
none
gotpointercapture
|
none
lostpointercapture
|
none
Het is duidelijk dat er een drietal aanvullende pointergebeurtenissen bestaan zonder correlatieve muisgebeurtenissen. Het begrip van dergelijke gebeurtenissen zal te zijner tijd worden gedefinieerd.
Pointer-events gebruiken in JavaScript
Je kunt pointer-events gebruiken op een manier die analoog is aan die van muisevents, en de typische workflow voor het verwerken van zulke events volgt over het algemeen de volgende structuur:
Een DOM-zoekmechanisme gebruiken om een specifiek HTML-element op te halen uit het documentobjectmodel door de unieke identificatie of attributen binnen de HTML-code op te geven, waardoor efficiënte manipulatie van en interactie met het geselecteerde element in JavaScript of andere programmeertalen mogelijk is.
Door gebruik te maken van de methode addEventListener kan men een gebeurtenis van belang aanwijzen en deze associëren met een functie die moet worden uitgevoerd wanneer deze gebeurtenis zich voordoet.
Gebruik de attributen en functies van het gebeurtenisobject dat als parameter wordt doorgegeven aan de callbackfunctie, die een gebeurtenis voorstelt die een reactie of antwoord in code activeert.
Hier is een voorbeeld dat de gebeurtenis pointermove gebruikt:
// 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
function handlePointerMove(ev) {
// Handle the event however you want to
target.textContent = `Moved at x: ${ev.clientX}, y: ${ev.clientY}`;
}
De meegeleverde code maakt een aangewezen object binnen het DOM, samen met een gescripte functionaliteit in JavaScript die reageert op de gebeurtenis “pointermove”.Door gebruik te maken van een JavaScript-functie voegt deze code een gebeurtenisluisteraar toe aan het opgegeven doelelement die zowel de aanwijzeractie als de bijbehorende functie aan elkaar bindt.
Met dit stukje code kan de positie van een doelelement op een webpagina worden gevisualiseerd door er met een cursor, vinger of pen overheen te bewegen. Het element in kwestie wordt geïdentificeerd via zijn unieke “doel”-identificatie.
Op een vergelijkbare manier kun je de verschillende aanwijsevenementen gebruiken voor het beoogde doel.
De gebeurtenis PointerCancel
De gebeurtenis PointerCancel wordt geactiveerd wanneer een andere gebeurtenis PointerCancel verstoort en de lopende uitvoering beëindigt voordat deze is voltooid. Doorgaans annuleert de browser alle voorgaande pointer-events die mogelijk plaatsvonden op het moment van onderbreking. Verschillende factoren kunnen leiden tot de activering van deze gebeurtenis, inclusief maar niet beperkt tot:
Tijdens het actief manipuleren van een elektronisch apparaat door middel van aanraakgebaseerde interacties, zoals het slepen van een element over het scherm, kunnen gebruikers onderbrekingen in hun werkproces tegenkomen als gevolg van inkomende gesprekken of meldingen die onmiddellijke aandacht vereisen.
⭐Wanneer de oriëntatie van het apparaat verandert.
⭐Wanneer het browservenster de focus verliest.
Wanneer een gebruiker ervoor kiest om weg te navigeren van de huidige interface of interactie aan te gaan met een ander programma, wat aangeeft dat hij zijn huidige aandacht verlegd en van prioriteit verandert.
De gebeurtenis pointercancel biedt een veelzijdige oplossing om verschillende scenario’s aan te pakken op een manier die is afgestemd op uw specifieke vereisten. Hieronder wordt een voorbeeld gegeven:
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);
});
Pointer Capturing
Met Pointer Capturing kan een aangewezen HTML-element alle op pointer gebaseerde interacties onderscheppen en erop reageren, ongeacht of ze binnen of buiten de afgebakende grenzen plaatsvinden.
Met de methode setPointerCapture() kunnen pointers met betrekking tot een specifiek element worden vastgelegd, terwijl met de methode releasePointerCapture() alle vastgelegde pointers met betrekking tot dat specifieke element worden vrijgegeven.
Pointer capture events, zowel verkregen als verloren, kunnen effectief worden gebruikt voor het vastleggen van pointers in verschillende scenario’s.
De gebeurtenis gotpointercapture
De gebeurtenis gotpointercapture wordt geactiveerd wanneer een element pointerinvoer vastlegt. Deze gebeurtenis kan worden gebruikt om een status in te stellen voor het afhandelen van pointer-events op een HTML-element.In een tekenprogramma kan bijvoorbeeld de gotpointercapture event worden gebruikt om de startpositie van de cursor in te stellen.
The lostpointercapture Event
The Lost Pointer Capture Event wordt geactiveerd wanneer een element de muisaanwijzer loslaat. Dit event biedt de mogelijkheid om een eerder vastgestelde toestand los te laten of te elimineren die werd gestart toen het element de aanwijzer vastlegde. In een grafische toepassing zoals een tekenprogramma kan de Lost Pointer Capture Event worden gebruikt om de aanwezigheid van de cursor te verbergen, waardoor de gebruikerservaring wordt verbeterd door naadloze interactiviteit en visuele onderdompeling.
Eigenschappen van Pointer Events
Pointer events bezitten bepaalde eigenschappen die bijdragen aan verhoogde interactiviteit en reactiesnelheid op websites. Deze eigenschappen komen overeen met die van muisgebeurtenissen, maar hebben ook aanvullende kenmerken. Dit stuk gaat in op een selectie van deze toegevoegde eigenschappen.
De eigenschap pointerId
De eigenschap pointerId is een onderscheidende identifier die wordt toegewezen aan elke afzonderlijke invoer op basis van een aanwijzer, inclusief invoer met een stylus, vinger of muis. Deze automatisch gegenereerde identifier, geleverd door de browser, maakt het mogelijk om meerdere inputs te volgen en vergemakkelijkt het uitvoeren van verschillende acties geassocieerd met elke respectieve input.
In een multitouch spelscenario dient de eigenschap PointerId als een effectieve manier om onderscheid te maken tussen individuele vinger- of stylusinvoer. Door een unieke identifier toe te wijzen aan het oppervlak van elke pointer, kan het systeem nauwkeurig verschillende aanrakingen van meerdere bronnen onderscheiden en verwerken, waarbij de eerste invoer wordt aangewezen als de primaire ID.
Deze eigenschap is zeer nuttig wanneer deze wordt gebruikt met apparaten die op aanraking zijn gebaseerd, omdat dergelijke apparaten meerdere vingerinputs tegelijkertijd kunnen verwerken zonder dat er extra randapparatuur nodig is. Daarentegen zijn cursorgeoriënteerde apparaten, die voornamelijk afhankelijk zijn van het gebruik van een muisaanwijzer, beperkt in hun vermogen om gelijktijdig meer dan één aanwijzerinvoer te ontvangen, waardoor aanvullende apparatuur nodig is om deze functionaliteit mogelijk te maken.
Zeker, hier is een elegant geformuleerde versie van het codefragment in kwestie:csharpvoid printPointerIds(int* ptr1, int* ptr2) {std::cout " “ID of Pointer 1: " " *ptr1 " std::endl;std::cout ““ID of Pointer 2: " *ptr2 " std::endl;}/ Gebruik:int main() {int arr[5] = {0, 1, 2, 3, 4};auto ptr1 = arr; // Declareer en initialiseer pointer ‘ptr1’ met adres van eerste element van array ‘arr’.auto ptr2 = &arr[1]; // Aangeven en initialiseren aanwijzer '
const target = document.getElementById('target');
target.addEventListener('pointerdown', (event) => {
console.log(`Pointer ID: ${event.pointerId}`);
// Handle the pointer down event for the specific pointerId
});
De eigenschap pointerType
“muis”, “pen” of “aanraking”. Hieronder staat een eenvoudige illustratie van het gebruik van de eigenschap pointerType :
function handlePointerEvent(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);
De eigenschappen breedte en hoogte
De afmetingen van het contactgebied van de aanwijzer worden door deze eigenschappen uitgedrukt in millimeters. Helaas herkennen sommige webbrowsers deze eigenschappen niet, wat resulteert in een constante waarde van 1 voor die specifieke browsers.
Een geschikte toepassing voor de bovengenoemde eigenschappen is te vinden in programma’s die exacte invoer vereisen of onderscheid moeten maken tussen invoer van verschillende grootte. Denk bijvoorbeeld aan een tekenprogramma waarin grotere afmetingen overeenkomen met een grotere penseelstreek, terwijl kleinere afmetingen een kleiner gebaar betekenen.
Bij het werken met aanraakgebeurtenissen in webontwikkeling is het gebruikelijk om de eigenschappen breedte en hoogte te gebruiken.
Gebruik Pointer Events voor meer inclusiviteit
Het gebruik van pointer events kan het proces van het aanpassen van verschillende apparaten en invoermodaliteiten sterk vereenvoudigen, waardoor je geen buitensporige inspanning meer hoeft te leveren. Voldoen aan de huidige standaarden door deze gebeurtenissen op te nemen in je applicaties wordt ten zeerste aanbevolen omdat het bijdraagt aan de verbetering van de webervaring.