En este artículo vamos a explicar que son los eventos apuntadores o Pointer Events en JavaScript, la unificación de todos los dispositivos apuntadores. En los dispositivos modernos, interactuar con la interfaz de usuario puede involucrar una combinación de dispositivos de entrada, como el mouse, pantallas táctiles o incluso dispositivos como lápices ópticos (stylus).
Para gestionar todos estos dispositivos de entrada de manera eficiente, los eventos apuntadores o Pointer Events fueron introducidos en JavaScript, para proporcionar una forma unificada de manejar las interacciones con el usuario en todos los dispositivos de entrada compatibles. En este artículo, vamos a explicar qué son los eventos apuntadores o Pointer Events en JavaScript, cómo funcionan y cómo puedes utilizarlos para gestionar interacciones en tus aplicaciones.
¿Qué son los Pointer Events?
Los eventos apuntadores o Pointer Events son un conjunto de eventos JavaScript que permite a los desarrolladores manejar las interacciones del usuario con la interfaz de usuario de manera más eficiente y flexible. A diferencia de tradicionales eventos JavaScript de ratón o táctiles (click, mousemove, touchstart, etc.), los Pointer Events proporcionan una forma única de tratar todas las interacciones, sin tener que diferenciar entre un toque en una pantalla táctil o un clic de un mouse.
Ventajas de los Pointer Events:
- Unificación: En JavaScript los eventos apuntadores o Pointer Events, permiten manejar eventos de mouse, táctiles y de lápiz de forma unificada. No es necesario usar diferentes tipos de eventos para cada dispositivo de entrada.
- Precisión: Proporcionan más información sobre el evento de entrada, como el tipo de dispositivo de entrada (mouse, tactil, lápiz) y su estado.
- Mejor control: Facilitan la detección de entradas de múltiples puntos de contacto a la vez, sin necesidad de manejar eventos adicionales como
touchstart,touchmove,mousedown, etc.
Eventos principales de Pointer Events
El enfoque y uso JavaScript básico de los eventos apuntadores o Pointer Events es similar a los Mouse Events o Touch Events explicados en artículos anteriores.
element.addEventListener(event, function(e), useCapture);En el caso de los eventos apuntadores o Pointer Events más comunes en JavaScript tenemos los siguientes:
Evento pointerdown
El evento pointerdown se activa cuando el dispositivo de entrada (ratón, pantalla táctil, etc.) hace contacto con la interfaz de usuario. Es el equivalente al evento mousedown, pero con soporte para todos los dispositivos de entrada. Un ejemplo de uso sería el siguiente:
element.addEventListener('pointerdown', function(e) {
console.log('Pointer Down');
});Evento pointerup
El evento pointerup se dispara cuando el dispositivo de entrada deja de estar en contacto con el área interactuable, es decir, cuando se suelta el botón del ratón, el dedo deja la pantalla táctil o el lápiz se levanta. Un ejemplo de uso sería el siguiente:
element.addEventListener('pointerup', function(e) {
console.log('Pointer Up');
});
Evento pointermove
El evento pointermove se activa cuando el dispositivo de entrada se mueve mientras está en contacto con la interfaz de usuario. Es útil para gestionar interacciones como arrastrar objetos o dibujar en la pantalla. Un ejemplo de uso sería el siguiente:
element.addEventListener('pointermove', function(e) {
console.log(`Pointer Move: X=${e.clientX}, Y=${e.clientY}`);
});Eventos pointerover y pointerout
Los eventos pointerover y pointerout funcionan de manera similar a los eventos mouseover y mouseout de los ratones, pero son más adecuados para cualquier tipo de entrada.
pointerover: Se activa cuando el dispositivo de entrada entra en el área del objetivo.pointerout: Se activa cuando el dispositivo de entrada sale del área del objetivo.
Un ejemplo de uso sería el siguiente:
element.addEventListener('pointerover', function(e) {
console.log('Pointer Over');
});
element.addEventListener('pointerout', function(e) {
console.log('Pointer Out');
});Eventos pointerenter y pointerleave
Los eventos pointerneter y pointerleave son similares a pointerover y pointerout, pero la diferencia principal es que pointerenter y pointerleave no se disparan en los elementos hijos del objetivo, a diferencia de pointerover y pointerout. Un ejemplo de uso sería el siguiente:
element.addEventListener('pointerenter', function(e) {
console.log('Pointer Enter');
});
element.addEventListener('pointerleave', function(e) {
console.log('Pointer Leave');
});Evento pointercancel
El evento pointercancel se activa cuando el sistema o el navegador decide cancelar una interacción de apuntador en curso, como en el caso de un gesto multitáctil interrumpido o cuando el sistema detecta un error en la entrada. Un ejemplo de uso sería el siguiente:
element.addEventListener('pointercancel', function(e) {
console.log('Pointer Cancel');
});Eventos gotpointercapture y lostpointercapture
Los eventos gotpointercapture y lostpointercapture son utilizados para capturar un puntero y gestionar la forma en la que se maneja la interacción cuando varios dispositivos de entrada interactúan con un mismo elemento.
gotpointercapture: Se dispara cuando un elemento empieza a capturar el puntero.lostpointercapture: Se dispara cuando un elemento pierde la captura del puntero.
Un ejemplo de uso sería el siguiente:
element.addEventListener('gotpointercapture', function(e) {
console.log('Pointer Capture');
});
element.addEventListener('lostpointercapture', function(e) {
console.log('Pointer Lost Capture');
});Propiedades Pointer Events en JavaScript
Los eventos apuntadores o Pointer Events en JavaScript contienen varias propiedades que pueden ser útiles al gestionar la interacción con dispositivos de entrada:
pointerId: Un identificador único para el puntero.width: El tamaño del área de contacto del puntero en el eje X.height: El tamaño del área de contacto del puntero en el eje Y.pressure: La presión del dispositivo (en dispositivos como lápices).tiltX, tiltY: El ángulo de inclinación del lápiz.pointerType: El tipo de dispositivo de entrada (por ejemplo,mouse,touch,pen).isPrimary: Indica si el puntero es el principal de los contactos múltiples.clientX, clientY: Las coordenadas del puntero dentro de la ventana del navegador.
Un ejemplo de uso que mediría diferentes propiedades del Pointer Event sería el siguiente:
element.addEventListener('pointermove', function(e) {
console.log(`Pointer Type: ${e.pointerType}`);
console.log(`Pointer Pressure: ${e.pressure}`);
console.log(`Pointer Coordinates: X=${e.clientX}, Y=${e.clientY}`);
});Ejemplo de Pointer Events en JavaScript
Vamos a ver un código de ejemplo completo para acceder a los Pointer Events o eventos apuntadores en JavaScript. Este ejemplo de código usa varios de los eventos apuntadores o Pointer Events para realizar una acción como arrastrar un objeto en la pantalla mediante JavaScript: XXXXXXXXXXXXXXXXX
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Eventos de Pointer en HTML</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
#area {
width: 80%;
height: 300px;
padding: 10px;
margin: 20px auto;
border: 2px solid black;
display: flex;
align-items: center;
justify-content: center;
background-color: #f0f0f0;
}
#recuadro {
width: 80%;
padding: 10px;
margin: 20px auto;
border: 2px solid black;
background-color: #e0e0e0;
font-family: Consolas, monospace;
white-space: pre-wrap;
overflow-y: auto;
}
</style>
</head>
<body>
<h2>Prueba de Eventos de Pointer</h2>
<p>Interactúa con el área de abajo y observa los valores en el recuadro de texto.</p>
<div id="area">Usa el mouse, táctil o lápiz aquí</div>
<div id="recuadro">Aquí se mostrarán los valores de los eventos de pointer ...</div>
<script>
const area = document.getElementById("area");
const recuadro = document.getElementById("recuadro");
function mostrarEvento(e) {
const detalles = `
Evento: ${e.type}
pointerId: ${e.pointerId}
pointerType: ${e.pointerType}
isPrimary: ${e.isPrimary}
Posición (X, Y): (${e.clientX}, ${e.clientY})
Width: ${e.width}
Height: ${e.height}
Pressure: ${e.pressure}
TiltX: ${e.tiltX}
TiltY: ${e.tiltY}
Botón presionado: ${e.button}
Teclas presionadas - Ctrl: ${e.ctrlKey}, Shift: ${e.shiftKey}, Alt: ${e.altKey}
Elemento objetivo: ${e.target.tagName}
`;
recuadro.textContent = detalles;
}
// Eventos principales de Pointer
area.addEventListener("pointerdown", mostrarEvento);
area.addEventListener("pointerup", mostrarEvento);
area.addEventListener("pointermove", mostrarEvento);
area.addEventListener("pointerover", mostrarEvento);
area.addEventListener("pointerout", mostrarEvento);
area.addEventListener("pointerenter", mostrarEvento);
area.addEventListener("pointerleave", mostrarEvento);
area.addEventListener("pointercancel", mostrarEvento);
area.addEventListener("gotpointercapture", mostrarEvento);
area.addEventListener("lostpointercapture", mostrarEvento);
// Bloqueo del menú contextual con botón derecho
area.addEventListener("contextmenu", function (e) {
e.preventDefault();
mostrarEvento(e);
alert("Menú contextual bloqueado.");
});
</script>
</body>
</html>Ventajas de los Pointer Events
Si decidimos utilizar los eventos apuntadores o Pointer Events en JavaScript podemos beneficiarnos de las siguientes ventajas:
- Unificación: En lugar de manejar eventos separados para mouse, touch y stylus, los Pointer Events permiten gestionar todos esos tipos de entrada con un único conjunto de eventos.
- Mayor precisión: Ofrecen más información sobre las interacciones que los eventos tradicionales, como la presión o el tipo de dispositivo.
- Gestión de múltiples punteros: Pointer Events facilitan el manejo de entradas multitáctiles o múltiples punteros, lo que es esencial en aplicaciones interactivas y juegos.
Pointer Events en JavaScript
Los eventos apuntadores o Pointer Events en JavaScript, representan una mejora significativa sobre los eventos tradicionales como mousemove, click, touchstart, etc. Proporcionan un enfoque unificado y más preciso para manejar interacciones con dispositivos de entrada en la web, sin la necesidad de diferenciar entre tipos de dispositivos. Esto mejora la compatibilidad y simplifica la escritura de código interactivo para aplicaciones modernas que requieren interacciones con el usuario.
A medida que los dispositivos de entrada evolucionan, en JavaScript los eventos apuntadores o Pointer Events seguirán siendo una herramienta esencial para los desarrolladores, proporcionando un control más granular sobre la interacción del usuario en sus aplicaciones web.
Puedes consultar la documentación oficial sobre los Pointer Events en JavaScript aquí.
¡ Espero que este artículo sea de vuestro interés !