Como usar eventos de ponteiro em JavaScript

Conclusões principais

Para garantir a inclusão e a acessibilidade de uma base de utilizadores mais vasta, as aplicações Web devem ser concebidas com diversas opções de entrada para além dos tradicionais ratos. Esta abordagem permite uma maior adaptabilidade às necessidades e preferências individuais, ao mesmo tempo que promove a usabilidade universal.

A utilização de eventos de ponteiro no JavaScript permite o tratamento eficiente de interacções baseadas no rato e no toque, evitando assim a necessidade de processos de implementação separados para cada tipo de evento respetivo.

A conceção de eventos de ponteiro no desenvolvimento moderno da Web reflecte de perto a dos eventos de rato tradicionais, facilitando a adaptação de código-fonte pré-existente para acomodar a entrada de ecrã tátil e de caneta.

A prevalência da tecnologia de ecrã tátil levou a uma maior dependência de entradas baseadas nos dedos para interacções digitais. Consequentemente, é crucial que as práticas modernas de desenvolvimento Web acomodem e facilitem diversas formas de interação do utilizador através de vários dispositivos de entrada, para além das interfaces tradicionais baseadas no rato.

A utilização da norma mais recente conhecida como Eventos de ponteiro em JavaScript permite a integração perfeita de entradas baseadas no rato e no toque, eliminando assim a necessidade de processos de implementação separados.

O que são eventos de ponteiro?

Os eventos de ponteiro constituem um paradigma universalmente aplicável para a gestão de modalidades de entrada diversificadas num contexto de navegação na Web, abrangendo interfaces tradicionais baseadas em cursor, juntamente com alternativas contemporâneas, como as interacções baseadas no ecrã tátil e na caneta. Esta abordagem coesa garante uma interface perfeita com conteúdos baseados na Internet, independentemente da plataforma de hardware utilizada.

Na sua essência, os eventos de ponteiro facilitam a gestão de um conjunto de interacções do utilizador, independentemente da sua origem.

Tipos de eventos de ponteiro

Os eventos de ponteiro têm um nome semelhante ao dos eventos de rato, que talvez já sejam do seu conhecimento. A cada evento de rato em JavaScript corresponde o respetivo evento de ponteiro, permitindo a conversão de “rato” para “ponteiro”, de modo a suportar dispositivos de entrada de toque e caneta.

O gráfico fornecido ilustra uma comparação lado a lado de vários eventos de ponteiro, em contraste com os eventos de rato correspondentes:

Eventos de ponteiro

|

Eventos de rato

-|-

pointerdown

|

mousedown

pointerup

|

mouseup

pointermove

|

mousemove

pointerleave

|

mouseleave

pointerover

|

mouseover

pointerenter

|

mouesenter

pointerout

|

mouseout

pointercancel

|

none

gotpointercapture

|

nenhum

lostpointercapture

|

nenhum

É evidente que existe um trio de eventos suplementares do ponteiro que não têm eventos correlativos do rato. A compreensão de tais ocorrências será delineada na devida altura.

Utilização de eventos de ponteiro em JavaScript

Pode utilizar eventos de ponteiro de forma análoga à dos eventos de rato, e o fluxo de trabalho típico para processar esses eventos segue geralmente a seguinte estrutura:

Utilizar um mecanismo de consulta DOM para recuperar um elemento HTML específico do modelo de objeto do documento especificando o seu identificador ou atributos únicos no código HTML, permitindo uma manipulação e interação eficientes com o elemento selecionado em JavaScript ou noutras linguagens de programação.

Utilizando o método addEventListener , é possível designar um evento de interesse e associá-lo a uma função a ser executada aquando da sua ocorrência.

Utilizar os atributos e funções do objeto de evento passado como parâmetro para a função de retorno de chamada, que representa uma ocorrência que desencadeia uma reação ou resposta no código.

Eis um exemplo que utiliza 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
function handlePointerMove(ev) {
    // Handle the event however you want to
    target.textContent = `Moved at x: ${ev.clientX}, y: ${ev.clientY}`;
}

O código fornecido estabelece um objeto designado no seu DOM, juntamente com uma funcionalidade de script em JavaScript que responde ao evento “pointermove”.Ao utilizar uma função JavaScript, este código adiciona um ouvinte de eventos ao elemento alvo especificado que liga a ação baseada no ponteiro e a função associada.

Este pedaço de código permite a visualização da posição de um elemento alvo numa página Web através do movimento de um ponteiro sobre ele através de um cursor, dedo ou caneta. O elemento em questão é identificado através do seu identificador único de “alvo”.

De forma semelhante, pode utilizar os vários eventos do ponteiro para o fim pretendido.

O evento pointercancel

O evento PointerCancel é ativado quando um evento de ponteiro diferente interfere e termina a sua execução em curso antes da conclusão pretendida. Normalmente, o browser anula qualquer evento de ponteiro anterior que possa estar a decorrer no momento da interrupção. Uma variedade de factores pode levar à ativação deste evento, incluindo, mas não se limitando a:

Enquanto manipulam ativamente um dispositivo eletrónico através de interações baseadas no toque, como arrastar um elemento pelo ecrã, os utilizadores podem encontrar interrupções no seu fluxo de trabalho devido a chamadas recebidas ou notificações que requerem atenção imediata.

⭐Quando a orientação do dispositivo muda.

⭐Quando a janela do browser perde o foco.

Quando um utilizador decide navegar para fora da interface atual ou interagir com outro programa, sinalizando um desvio do seu atual foco de atenção e indicando uma mudança de prioridade.

O evento pointercancel oferece uma solução versátil para abordar vários cenários de uma forma adaptada às suas necessidades específicas. Segue-se um exemplo demonstrativo:

 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 ponteiros

A captura de ponteiros permite que um elemento HTML designado intercepte e reaja a todas as interacções baseadas em ponteiros que lhe são dirigidas, independentemente de ocorrerem dentro ou fora dos seus limites delineados.

O método setPointerCapture() permite capturar ponteiros relacionados com um elemento específico, enquanto o método releasePointerCapture() liberta quaisquer ponteiros capturados associados a esse elemento específico.

Os eventos de captura de apontadores, tanto obtidos como perdidos, podem ser utilizados eficazmente para capturar apontadores em vários cenários.

O evento gotpointercapture

O evento gotpointercapture é disparado quando um elemento captura uma entrada de ponteiro. Este evento pode ser utilizado para estabelecer um estado para tratar eventos de ponteiro num elemento HTML.Num programa de desenho, por exemplo, o evento gotpointercapture pode ser aproveitado para definir a posição inicial do cursor.

O evento lostpointercapture

O evento Lost Pointer Capture é ativado sempre que um elemento abandona o ponteiro do rato. Este evento oferece uma oportunidade para libertar ou eliminar qualquer estado previamente estabelecido que tenha sido iniciado quando o elemento adquiriu a captura do ponteiro. Numa aplicação gráfica, como um programa de desenho, o evento de captura de ponteiro perdido pode ser utilizado para ocultar a presença do cursor, melhorando a experiência do utilizador através de uma interatividade e imersão visual perfeitas.

Propriedades dos eventos de ponteiro

Os eventos de ponteiro possuem determinados atributos que contribuem para aumentar a interatividade e a capacidade de resposta nos sítios Web. Estes atributos reflectem os encontrados nos eventos de rato, incorporando também características suplementares. Este artigo analisa uma seleção destas características adicionais.

A propriedade pointerId

O pointerId é um identificador distinto atribuído a cada entrada individual baseada no ponteiro, incluindo as efectuadas com uma caneta, dedo ou rato. Este identificador gerado automaticamente, fornecido pelo browser, permite o rastreio de múltiplas entradas e facilita a execução de várias acções associadas a cada entrada respectiva.

Num cenário de jogo multi-toque, a propriedade PointerId serve como um meio eficaz de distinguir entre entradas individuais do dedo ou da caneta. Ao atribuir um identificador único à superfície de cada ponteiro, o sistema pode diferenciar e processar com precisão toques distintos de várias fontes, sendo a entrada inicial designada como a ID principal.

Esta propriedade apresenta uma utilidade considerável quando utilizada com dispositivos tácteis, uma vez que estes dispositivos são capazes de acomodar múltiplas entradas de dedos em simultâneo sem necessidade de qualquer hardware periférico adicional. Em contraste, os dispositivos orientados para o cursor, que dependem principalmente da utilização de um ponteiro de rato, são limitados na sua capacidade de receber simultaneamente mais do que uma entrada de ponteiro, necessitando da incorporação de equipamento suplementar para permitir esta funcionalidade.

Certamente, aqui está uma versão elegantemente formulada do trecho de código em questão:csharpvoid printPointerIds(int* ptr1, int* ptr2) {std::cout " “ID do Ponteiro 1: " " *ptr1 " std::endl;std::cout " “ID do Ponteiro 2: " " *ptr2 " std::endl;}// Usage:int main() {int arr[5] = {0, 1, 2, 3, 4};auto ptr1 = arr; // Declare e inicialize o ponteiro ‘ptr1’ com o endereço do primeiro elemento do array ‘arr’.auto ptr2 = &arr[1]; // Declara e inicializa o ponteiro '

 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

“mouse”, “pen”, ou “touch”. Uma ilustração direta da utilização da propriedade pointerType pode ser encontrada abaixo:

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

A largura e a altura Propriedades

As dimensões da região de contacto do ponteiro são expressas em milímetros por estes atributos. Infelizmente, alguns navegadores Web não reconhecem estas propriedades, o que resulta num valor constante de 1 para esses navegadores específicos.

Uma aplicação adequada para os atributos supramencionados pode ser encontrada em programas que necessitem de uma entrada exacta ou que exijam o discernimento entre entradas de tamanho variável. A título de exemplo, considere-se um programa de desenho em que dimensões maiores correspondem a uma pincelada mais extensa e, inversamente, medidas mais pequenas significam um gesto mais estreito.

Normalmente, quando se trabalha com eventos de toque no desenvolvimento Web, é prática comum utilizar as propriedades de largura e altura.

Utilizar eventos de ponteiro para maior inclusão

A utilização de eventos de ponteiro pode simplificar bastante o processo de acomodação de diversos dispositivos e modalidades de entrada, eliminando a necessidade de um esforço excessivo da sua parte. A conformidade com as normas actuais através da incorporação destes eventos nas suas aplicações é altamente recomendada, uma vez que contribui para a melhoria da experiência na Web.