Como usar eventos de ponteiro em JavaScript

Principais conclusões

• As aplicações Web devem suportar uma variedade de dispositivos de entrada, e não apenas um mouse, para atender a um público mais amplo.
• Os eventos de ponteiro em JavaScript lidam com eventos de mouse e toque, eliminando a necessidade de implementá-los separadamente.
• Os eventos de ponteiro têm nomes e funcionalidades semelhantes aos eventos de mouse, facilitando a atualização do código existente para dar suporte a entradas de toque e caneta.

Muitas aplicações web assumem que o dispositivo apontador de um usuário será um mouse, então eles usam eventos de mouse para lidar com interações. No entanto, com o surgimento dos dispositivos touchscreen, os usuários não precisam de mouse para interagir com os sites. É essencial oferecer suporte a uma variedade de dispositivos de entrada para atender ao público mais amplo possível.

JavaScript possui um padrão mais recente chamado eventos de ponteiro. Ele lida com eventos de mouse e toque, então você não precisa se preocupar em implementá-los separadamente.

O que são eventos de ponteiro?

Eventos de ponteiro são um padrão da web que define uma maneira unificada de lidar com diferentes métodos de entrada em um navegador da web, incluindo mouse, toque e caneta. Esses eventos fornecem uma maneira consistente e independente de plataforma de interagir com o conteúdo da web em diferentes dispositivos.

Resumindo, os eventos de ponteiro ajudam a lidar com esse grupo de interações do usuário, independentemente da origem.

Tipos de eventos de ponteiro

Os eventos de ponteiro são nomeados de forma semelhante aos eventos de mouse com os quais você já deve estar familiarizado. Para cada evento do mouse em JavaScript, há um correspondente evento de ponteiro. Isso significa que você pode revisitar seu código antigo e trocar “mouse” por “ponteiro” para começar a oferecer suporte a entradas de toque e caneta.

A tabela a seguir mostra os diferentes eventos de ponteiro em comparação com eventos de mouse:

Você pode ver que existem três eventos de ponteiro extras sem eventos de mouse correspondentes. Você aprenderá sobre esses eventos mais tarde.

Usando eventos de ponteiro em JavaScript

Você pode usar eventos de ponteiro da mesma forma que usa eventos de mouse. Como a maioria dos manipuladores de eventos, o processo geralmente segue este padrão:

1. Use um seletor DOM para buscar um elemento.
2. Usando o addEventListener método, especifique o evento no qual você está interessado e uma função de retorno de chamada.
3. Use propriedades e métodos do argumento do retorno de chamada, um Evento objeto.

Aqui está um exemplo usando o 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}`;
}

Este bloco de código define um elemento de destino e uma função JavaScript para lidar com o ponteiro mover evento então ele usa um Ouvinte de eventos JavaScript para anexar o evento de ponteiro e a função ao elemento de destino.

Usando este código, um elemento com um ID de “destino” exibirá as coordenadas do ponteiro quando você mover o cursor, o dedo ou a caneta sobre ele:

Você pode usar os outros eventos de ponteiro da mesma maneira.

O evento pointercancel

O evento pointercancel é acionado quando outro evento de ponteiro é interrompido antes de concluir sua operação conforme inicialmente pretendido. Normalmente, o navegador cancela qualquer evento de ponteiro que possa estar em ação antes. Existem muitas razões pelas quais um ponteiro cancelar evento pode desencadear, por exemplo:

• Quando um usuário recebe uma chamada telefônica ou alguma outra notificação de interrupção enquanto arrasta um elemento pela tela.
• Quando a orientação do dispositivo muda.
• Quando a janela do navegador perde o foco.
• Quando o usuário muda para outra guia ou aplicativo.

Com o ponteiro cancelar evento, você pode lidar com essas situações como quiser. Aqui está um exemplo:

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

Captura de ponteiro

A captura de ponteiro é um recurso que permite que um determinado Elemento HTML capturar e responder a todos os eventos de ponteiro para um ponteiro específico, mesmo que esses eventos ocorram fora dos limites do elemento.

Você pode definir uma captura de ponteiro para um elemento com o setpointercapture() método e liberar uma captura de ponteiro com o releasepointercapture() método.

O captura de ponteiro e captura de ponteiro perdido eventos de ponteiro são úteis para captura de ponteiro.

O evento gotpointercapture

O captura de ponteiro O evento é acionado sempre que um elemento obtém captura de ponteiro. Você pode usar este evento para inicializar um estado para seu elemento HTML manipular eventos de ponteiro. Por exemplo, em um aplicativo de desenho, você pode usar captura de ponteiro evento para definir a posição inicial do cursor.

O Evento Lostpointercapture

O captura de ponteiro perdido O evento é acionado quando um elemento perde a captura do ponteiro. Você pode usá-lo para limpar ou remover qualquer estado criado quando o elemento obteve a captura do ponteiro. Em um aplicativo de desenho, você pode querer usar captura de ponteiro perdido para ocultar o cursor.

Propriedades de eventos de ponteiro

Os eventos de ponteiro possuem propriedades que o ajudarão a tornar seu site mais interativo e responsivo. As propriedades dos eventos de mouse são as mesmas que você encontrará nos eventos de ponteiro, além de algumas propriedades adicionais. Este artigo explica algumas das propriedades adicionais.

A propriedade pointerId

O ponteiroId é uma propriedade de evento de ponteiro que ajuda a identificar cada entrada exclusiva do ponteiro, como caneta, dedo ou mouse. Cada entrada de ponteiro recebe um ID exclusivo (gerado automaticamente pelo navegador) que permitirá rastrear e executar operações neles.

Um ótimo uso para ponteiroId property é um aplicativo de jogo onde os usuários usam simultaneamente vários dedos ou canetas. O ponteiroId propriedade permite que você acompanhe cada superfície do ponteiro atribuindo um ID exclusivo a cada uma delas. O ID primário é atribuído à primeira entrada do ponteiro.

Esta propriedade é particularmente útil para dispositivos sensíveis ao toque. Dispositivos que dependem de ponteiros de mouse podem ter apenas uma entrada de ponteiro por vez, sem algum dispositivo externo conectado a eles.

Aqui está um exemplo simples que imprime o ID de cada entrada de ponteiro no 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
});

A propriedade pointerType

A propriedade pointerType ajuda a distinguir entre os diferentes tipos de entradas de ponteiro e permite executar operações com base neles. Você pode diferenciar entre um mouse, uma caneta e um toque de dedo. Esta propriedade só pode receber uma das três entradas de string: “mouse”, “caneta” ou “toque”. Aqui está um exemplo simples de como usar o tipo de ponteiro propriedade:

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

As propriedades de largura e altura

Estas propriedades representam a largura e a altura da área de contato do ponteiro em milímetros. Alguns navegadores não os suportam e seu valor será sempre 1 nesses navegadores.

Um bom caso de uso para essas propriedades será em aplicativos que exigem entradas precisas ou que precisam diferenciar os tamanhos de diferentes entradas. Por exemplo, em um aplicativo de desenho, uma altura e uma largura maiores podem significar que o usuário está desenhando com um traço mais largo e vice-versa.

Na maioria das vezes, você provavelmente usará as propriedades de largura e altura para eventos de toque.

Use eventos de ponteiro para mais inclusão

Os eventos de ponteiro permitem atender a uma ampla variedade de dispositivos e tipos de entrada sem passar por muito estresse. Você deve sempre usá-los em seus aplicativos para estar em conformidade com os padrões modernos e ajudar a construir uma web melhor.