Cómo utilizar eventos de puntero en JavaScript

Conclusiones clave

• Las aplicaciones web deberían admitir una variedad de dispositivos de entrada, no sólo un mouse, para atender a un público más amplio.
• Los eventos de puntero en JavaScript manejan eventos táctiles y de mouse, eliminando la necesidad de implementarlos por separado.
• Los eventos de puntero tienen nombres y funciones similares a los eventos de mouse, lo que facilita la actualización del código existente para admitir entradas táctiles y de lápiz.

Muchas aplicaciones web suponen que el dispositivo señalador de un usuario será un mouse, por lo que utilizan eventos de mouse para manejar las interacciones. Sin embargo, con el auge de los dispositivos con pantalla táctil, los usuarios no necesitan un mouse para interactuar con los sitios web. Es esencial admitir una variedad de dispositivos de entrada para atender a la audiencia más amplia posible.

JavaScript tiene un estándar más nuevo llamado eventos de puntero. Maneja eventos táctiles y de mouse, por lo que no tiene que preocuparse por implementarlos por separado.

¿Qué son los eventos de puntero?

Los eventos de puntero son un estándar web que define una forma unificada de manejar diferentes métodos de entrada en un navegador web, incluidos el mouse, el tacto y el lápiz. Estos eventos proporcionan una forma consistente e independiente de la plataforma de interactuar con contenido web en diferentes dispositivos.

En pocas palabras, los eventos de puntero lo ayudan a manejar este grupo de interacciones de usuarios, independientemente de la fuente.

Tipos de eventos de puntero

Los eventos de puntero reciben nombres similares a los eventos de mouse con los que quizás ya esté familiarizado. Para cada evento del ratón en JavaScript, hay un correspondiente punteroEvento. Esto significa que puede revisar su código anterior y cambiar "mouse" por "puntero" para comenzar a admitir entradas táctiles y con lápiz.

La siguiente tabla muestra los diferentes eventos del puntero en comparación con los eventos del mouse:

Puede ver que hay tres eventos de puntero adicionales sin los eventos de mouse correspondientes. Aprenderá sobre estos eventos más adelante.

Usando eventos de puntero en JavaScript

Puede utilizar eventos de puntero de la misma manera que utiliza eventos de mouse. Como la mayoría del manejo de eventos, el proceso suele seguir este patrón:

1. Utilice un selector DOM para buscar un elemento.
2. Utilizando el agregarEventListener método, especifique el evento que le interesa y una función de devolución de llamada.
3. Utilice propiedades y métodos del argumento de la devolución de llamada, un Evento objeto.

A continuación se muestra un ejemplo que utiliza el 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 bloque de código define un elemento de destino y una función de JavaScript para manejar el movimiento de puntero evento entonces utiliza un Escucha de eventos de JavaScript para adjuntar el evento de puntero y la función al elemento de destino.

Usando este código, un elemento con una ID de "objetivo" mostrará las coordenadas del puntero cuando mueva el cursor, el dedo o el lápiz sobre él:

Puede utilizar los otros eventos de puntero de la misma manera.

El evento de cancelación del puntero

El evento de cancelación de puntero se activa cuando se interrumpe otro evento de puntero antes de que complete su operación como se pretendía inicialmente. Normalmente, el navegador cancela cualquier evento de puntero que haya estado en acción antes. Hay muchas razones por las que un puntero cancelar El evento podría desencadenar, por ejemplo:

• Cuando un usuario recibe una llamada telefónica o alguna otra notificación que lo interrumpe mientras arrastra un elemento por la pantalla.
• Cuando cambia la orientación del dispositivo.
• Cuando la ventana del navegador pierde el foco.
• Cuando el usuario cambia a otra pestaña o aplicación.

Con el puntero cancelar evento, puedes manejar estas situaciones como quieras. He aquí un ejemplo:

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 puntero

La captura de puntero es una característica que permite a un usuario específico elemento HTML capturar y responder a todos los eventos de puntero para un puntero en particular, incluso si esos eventos ocurren fuera de los límites del elemento.

Puede configurar una captura de puntero para un elemento con el captura de puntero() método y liberar una captura de puntero con el captura de puntero de liberación() método.

El captura de puntero y captura de puntero perdido Los eventos de puntero son útiles para la captura de puntero.

El evento gotpointercapture

El captura de puntero El evento se activa cada vez que un elemento obtiene la captura del puntero. Puede utilizar este evento para inicializar un estado para que su elemento HTML maneje eventos de puntero. Por ejemplo, en una aplicación de dibujo, puede utilizar captura de puntero evento para establecer la posición inicial del cursor.

El evento de captura de puntero perdido

El captura de puntero perdido El evento se activa cuando un elemento pierde la captura del puntero. Puede usarlo para limpiar o eliminar cualquier estado creado cuando el elemento obtuvo la captura del puntero. En una aplicación de dibujo, es posible que desee utilizar captura de puntero perdido para ocultar el cursor.

Propiedades de los eventos de puntero

Los eventos de puntero tienen propiedades que le ayudarán a hacer que su sitio web sea más interactivo y responsivo. Las propiedades de los eventos del mouse son las mismas que encontrará en los eventos del puntero, más algunas propiedades adicionales. Este artículo explica algunas de las propiedades adicionales.

La propiedad pointerId

El ID de puntero es una propiedad de evento de puntero que le ayuda a identificar cada entrada de puntero única, como un lápiz óptico, un dedo o un mouse. Cada entrada de puntero obtiene una identificación única (generada automáticamente por el navegador) que le permitirá rastrearlos y realizar operaciones en ellos.

Un gran uso para el ID de puntero La propiedad es una aplicación de juegos en la que los usuarios utilizan simultáneamente varios dedos o lápices ópticos. El ID de puntero La propiedad le permite realizar un seguimiento de cada superficie del puntero asignando una identificación única a cada una de ellas. La ID principal se asigna a la primera entrada del puntero.

Esta propiedad es particularmente útil para dispositivos táctiles. Los dispositivos que dependen de los punteros del mouse solo pueden tener una entrada de puntero a la vez sin ningún dispositivo externo conectado a ellos.

A continuación se muestra un ejemplo sencillo que imprime el ID de cada entrada del puntero en la consola:

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 propiedad pointerType

La propiedad pointerType le ayuda a distinguir entre los diferentes tipos de entradas de puntero y le permite realizar operaciones basadas en ellas. Puede diferenciar entre un mouse, un bolígrafo y un toque con el dedo. Esta propiedad sólo puede aceptar una de tres entradas de cadena: "mouse", "pen" o "touch". A continuación se muestra un ejemplo sencillo de cómo utilizar el tipo de puntero propiedad:

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

Las propiedades de ancho y alto

Estas propiedades representan el ancho y alto del área de contacto del puntero en milímetros. Algunos navegadores no los admiten y su valor siempre será 1 en dichos navegadores.

Un buen caso de uso para estas propiedades será en aplicaciones que requieran entradas precisas o que necesiten diferenciar entre los tamaños de diferentes entradas. Por ejemplo, en una aplicación de dibujo, una altura y un ancho mayores pueden significar que el usuario está dibujando con un trazo más amplio y viceversa.

La mayoría de las veces, es probable que utilices las propiedades de ancho y alto para eventos táctiles.

Utilice eventos de puntero para lograr una mayor inclusión

Los eventos de puntero le permiten atender una amplia gama de dispositivos y tipos de entrada sin pasar por mucho estrés. Siempre debes usarlos en tus aplicaciones para cumplir con los estándares modernos y ayudar a construir una mejor web.