Come utilizzare gli eventi puntatore in JavaScript

Punti chiave

• Le applicazioni Web dovrebbero supportare una gamma di dispositivi di input, non solo un mouse, per soddisfare un pubblico più ampio.
• Gli eventi del puntatore in JavaScript gestiscono sia gli eventi del mouse che quelli del tocco, eliminando la necessità di implementarli separatamente.
• Gli eventi del puntatore hanno nomi e funzionalità simili a quelli degli eventi del mouse, semplificando l'aggiornamento del codice esistente per supportare gli input tramite tocco e penna.

Molte applicazioni Web presuppongono che il dispositivo di puntamento di un utente sia un mouse, quindi utilizzano gli eventi del mouse per gestire le interazioni. Tuttavia, con l’avvento dei dispositivi touchscreen, gli utenti non hanno più bisogno del mouse per interagire con i siti web. È essenziale supportare una gamma di dispositivi di input per soddisfare il pubblico più vasto possibile.

JavaScript ha uno standard più recente chiamato eventi puntatore. Gestisce sia gli eventi del mouse che quelli tattili, quindi non devi preoccuparti di implementarli separatamente.

Cosa sono gli eventi puntatore?

Gli eventi puntatore sono uno standard Web che definisce un modo unificato di gestire diversi metodi di input in un browser Web, inclusi mouse, tocco e penna. Questi eventi forniscono un modo coerente e indipendente dalla piattaforma di interagire con i contenuti Web su diversi dispositivi.

In poche parole, gli eventi del puntatore ti aiutano a gestire questo gruppo di interazioni dell'utente, indipendentemente dalla fonte.

Tipi di eventi puntatore

Gli eventi del puntatore hanno nomi simili agli eventi del mouse con cui potresti già avere familiarità. Per ogni mouseEvent in JavaScript, c'è un corrispondente puntatoreEvento. Ciò significa che puoi rivisitare il tuo vecchio codice e cambiare "mouse" con "puntatore" per iniziare a supportare gli input touch e penna.

La tabella seguente mostra i diversi eventi del puntatore rispetto agli eventi del mouse:

Puoi vedere che ci sono tre eventi puntatore aggiuntivi senza eventi del mouse corrispondenti. Imparerai a conoscere questi eventi più tardi.

Utilizzo degli eventi puntatore in JavaScript

Puoi utilizzare gli eventi del puntatore nello stesso modo in cui utilizzi gli eventi del mouse. Come la maggior parte della gestione degli eventi, il processo solitamente segue questo schema:

1. Utilizza un selettore DOM per recuperare un elemento.
2. Usando il addEventListener metodo, specifica l'evento che ti interessa e una funzione di callback.
3. Utilizza proprietà e metodi dell'argomento del callback, an Evento oggetto.

Ecco un esempio che utilizza l'evento 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}`;
}

Questo blocco di codice definisce un elemento di destinazione e una funzione JavaScript per gestire il puntatore evento allora usa a Ascoltatore di eventi JavaScript per allegare l'evento del puntatore e la funzione all'elemento di destinazione.

Utilizzando questo codice, un elemento con un ID "bersaglio" visualizzerà le coordinate del puntatore quando si sposta il cursore, il dito o la penna su di esso:

È possibile utilizzare gli altri eventi del puntatore allo stesso modo.

L'evento pointercancel

L'evento pointercancel viene attivato quando un altro evento del puntatore viene interrotto prima che completi la sua operazione come inizialmente previsto. Normalmente, il browser annulla qualsiasi evento del puntatore potrebbe essere stato in azione in precedenza. Ci sono molte ragioni per cui a puntatorecancella l'evento potrebbe innescarsi, ad esempio:

• Quando un utente riceve una telefonata o qualche altra notifica di interruzione mentre trascina un elemento sullo schermo.
• Quando cambia l'orientamento del dispositivo.
• Quando la finestra del browser perde il focus.
• Quando l'utente passa a un'altra scheda o applicazione.

Con il puntatorecancella evento, puoi gestire queste situazioni come preferisci. Ecco un esempio:

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

Cattura del puntatore

L'acquisizione del puntatore è una funzionalità che consente a uno specifico Elemento HTML acquisire e rispondere a tutti gli eventi del puntatore per un particolare puntatore, anche se tali eventi si verificano all'esterno dei confini dell'elemento.

Puoi impostare l'acquisizione del puntatore per un elemento con il comando setpointercapture() metodo e rilasciare un'acquisizione del puntatore con il metodo releasepointercapture() metodo.

IL gotpointercapture E LostpointerCapture gli eventi del puntatore sono utili per l'acquisizione del puntatore.

L'evento gotpointercapture

IL gotpointercapture L'evento viene attivato ogni volta che un elemento ottiene la cattura del puntatore. Puoi utilizzare questo evento per inizializzare uno stato per il tuo elemento HTML per gestire gli eventi del puntatore. Ad esempio, in un'applicazione di disegno è possibile utilizzare gotpointercapture evento per impostare la posizione iniziale del cursore.

L'evento Lostpointercapture

IL LostpointerCapture L'evento viene attivato quando un elemento perde l'acquisizione del puntatore. Puoi usarlo per ripulire o rimuovere qualsiasi stato creato quando l'elemento ha ottenuto l'acquisizione del puntatore. In un'applicazione di disegno, potresti voler utilizzare LostpointerCapture per nascondere il cursore.

Proprietà degli eventi puntatore

Gli eventi puntatore hanno proprietà che ti aiuteranno a rendere il tuo sito web più interattivo e reattivo. Le proprietà degli eventi del mouse sono le stesse proprietà che troverai negli eventi del puntatore, più alcune proprietà aggiuntive. In questo articolo vengono illustrate alcune delle proprietà aggiuntive.

La proprietà pointerId

IL puntatoreId è una proprietà dell'evento del puntatore che consente di identificare ogni input univoco del puntatore, ad esempio stilo, dito o mouse. Ogni input del puntatore riceve un ID univoco (generato automaticamente dal browser) che ti consentirà di tracciarlo ed eseguire operazioni su di esso.

Un ottimo uso per il puntatoreId property è un'applicazione di gioco in cui gli utenti utilizzano contemporaneamente più dita o stili. IL puntatoreId La proprietà consente di tenere traccia di ciascuna superficie del puntatore assegnando un ID univoco a ciascuna di esse. L'ID primario viene assegnato al primo input del puntatore.

Questa proprietà è particolarmente utile per i dispositivi touch. I dispositivi che si basano sui puntatori del mouse possono avere un solo input del puntatore alla volta senza che siano collegati dispositivi esterni.

Ecco un semplice esempio che stampa l'ID di ciascun puntatore immesso nella console:

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

La proprietà pointerType

La proprietà pointerType ti aiuta a distinguere tra i diversi tipi di input del puntatore e ti consente di eseguire operazioni basate su di essi. È possibile distinguere tra mouse, penna e tocco del dito. Questa proprietà può accettare solo uno dei tre input di stringa: "mouse", "penna" o "tocco". Ecco un semplice esempio di come utilizzare il file pointerType proprietà:

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

Le proprietà di larghezza e altezza

Queste proprietà rappresentano la larghezza e l'altezza dell'area di contatto del puntatore in millimetri. Alcuni browser non li supportano e il loro valore sarà sempre 1 in tali browser.

Un buon caso d'uso per queste proprietà sarà nelle applicazioni che richiedono input precisi o che necessitano di distinguere tra le dimensioni di input diversi. Ad esempio, in un'applicazione di disegno, un'altezza e una larghezza maggiori potrebbero significare che l'utente sta disegnando con un tratto più ampio e viceversa.

Nella maggior parte dei casi, probabilmente utilizzerai le proprietà larghezza e altezza per gli eventi touch.

Utilizza gli eventi puntatore per una maggiore inclusività

Gli eventi puntatore ti consentono di soddisfare un'ampia gamma di dispositivi e tipi di input senza subire molto stress. Dovresti sempre usarli nelle tue applicazioni per conformarti agli standard moderni e contribuire a costruire un Web migliore.