Los eventos de puntero son una forma moderna de manejar la entrada de una variedad de dispositivos señaladores, como un mouse, un lápiz, una pantalla táctil, etc.
Una breve historia
Hagamos una pequeña descripción general para que comprenda la imagen general y el lugar de los Eventos de Puntero entre otros tipos de eventos.
-
Hace mucho tiempo, en el pasado, solo existían eventos de mouse.
Luego aparecieron los dispositivos táctiles, teléfonos y tablets en particular. Para que el código antiguo funcionara, generanban (y aún lo hacen) eventos de mouse. Por ejemplo, tocar la pantalla táctil genera
mousedown. Así los dispositivos táctiles funcionaban bien con las páginas web.Pero los dispositivos táctiles tienen más capacidades que un mouse. Por ejemplo, es posible tocar múltiples puntos al mismo (“multi-touch”). Los eventos del mouse no tienen las propiedades necesarias para manejar tal multi-touch.
-
Por lo tanto, se introdujeron eventos táctiles, como
touchstart,touchend,touchmove, que tienen propiedades específicas de toque (no los cubrimos en detalle aquí, porque los eventos de puntero son aún mejores).Aún así no fue suficiente, ya que hay muchos otros dispositivos, como los lápices, que tienen sus propias funciones. Y escribir código que escuchara ambos eventos, los táctiles y los del mouse, era engorroso.
-
Para resolver estos problemas, se introdujo el nuevo estándar: Pointer Events. Este proporciona un conjunto único de eventos para todo tipo de dispositivos señaladores.
Al momento la especificación Pointer Events Level 2 es soportada en todos los principales navegadores, mientras que Pointer Events Level 3 está en proceso y es mayormente compatible con Pointer Events level 2.
A menos que escribas código para navegadores viejos tales como Internet Explorer o Safari 12 y versiones anteriores, ya no tiene sentido usar eventos de mouse o táctiles: podemos pasar a eventos de puntero.
Así tu código funcionará tanto con mouse como con dispositivos táctiles.
Dicho esto, hay peculiaridades importantes, uno debe saber usarlas correctamente y evitar sorpresas adicionales. Les prestaremos atención en este artículo.
Tipos de eventos de puntero
Los eventos de puntero se llaman de forma similar a los eventos del mouse:
| Evento de puntero | Evento de mouse similar |
|---|---|
pointerdown |
mousedown |
pointerup |
mouseup |
pointermove |
mousemove |
pointerover |
mouseover |
pointerout |
mouseout |
pointerenter |
mouseenter |
pointerleave |
mouseleave |
pointercancel |
- |
gotpointercapture |
- |
lostpointercapture |
- |
Como podemos ver, para cada mouse<event>, hay un pointer<event> que juega un papel similar. También hay 3 eventos de puntero adicionales que no tienen una contraparte correspondiente de mouse ..., pronto hablaremos sobre ellos.
Podemos reemplazar los eventos mouse<event> con pointer<event> en nuestro código y esperar que las cosas sigan funcionando bien con el mouse.
El soporte para dispositivos táctiles mejorará “mágicamente”. Pero probablemente necesitemos agregar la regla touch-action: none en CSS. Cubriremos esto en la sección sobre pointercancel.
Propiedades de los eventos de puntero
Los eventos de puntero tienen las mismas propiedades que los eventos del mouse, como clientX/Y, target, etc., más algunos adicionales:
-
pointerId– el identificador único del puntero que causa el evento.Generado por el navegador. Permite manejar múltiples punteros, como una pantalla táctil con lápiz y multitáctil (explicado a continuación).
-
pointerType– el tipo de dispositivo señalador. Debe ser una cadena, uno de los siguientes: “mouse”, “pen” o “touch”.Podemos usar esta propiedad para reaccionar de manera diferente en varios tipos de punteros.
-
isPrimary–truepara el puntero principal (el primer dedo en multitáctil).
Para punteros que miden un área de contacto y presión, p. Ej. un dedo en la pantalla táctil, las propiedades adicionales pueden ser útiles:
width– el ancho del área donde el puntero (p.ej. el dedo) toca el dispositivo. Si el dispositivo no lo soporta (como el mouse), es siempre1.height– el alto del área donde el puntero toca el dispositivo. Donde no lo soporte es siempre1.pressure– la presión de la punta del puntero, en el rango de 0 a 1. En dispositivos que no soportan presión, debe ser0.5(presionada) o0.tangentialPressure– la presión tangencial normalizada.tiltX,tiltY,twist– propiedades específicas para un lápiz digital, describen cómo se lo coloca en relación con la superficie.
En la mayoría de los dispositivos estas propiedades no están soportadas, por lo que rara vez se utilizan. Si lo necesita puede encontrar los detalles en la especificación.