Manejar el mouse y la entrada táctil con la API de eventos de puntero

Con más y más personas que usan sus teléfonos móviles y tabletas para navegar por la web, nosotros, como desarrolladores, debemos asegurarnos de que nuestras interfaces web sean totalmente accesibles a través del tacto. Configurando click y hover los detectores de eventos funcionan, pero es claramente una solución sobrante de la era del mouse.

Afortunadamente, hay una nueva API en la ciudad que se adapta a las necesidades de los dispositivos de mouse, táctiles y stylus. Se llama eventos de puntero (que no debe confundirse con la propiedad CSS del mismo nombre) y nos permite agregar detectores de eventos que son más adecuados para trabajar con todos los tipos en la entrada.

Conoce los nuevos eventos

La nueva API Pointer Event es una versión evolucionada de la interfaz Mouse Event que todos hemos estado usando hasta ahora. Amplía la funcionalidad de la antigua API y agrega soporte para gestos multitáctiles, entrada de lápiz precisa y una interacción de pantalla táctil más fluida en general.

  • puntero hacia abajo:el puntero se activa
  • pointerup - El puntero deja de estar activo
  • pointerover, pointerenter - El puntero ingresa a los límites del elemento
  • pointerout, pointerleave - El puntero deja los límites de los elementos
  • pointermove - El puntero se mueve dentro de los límites del elemento
  • pointercancel:el puntero dejó de generar eventos, p. dispositivo de entrada desactivado
  • gotpointercapture:el puntero ha entrado en estado de captura de puntero, p. arrastrando un elemento móvil
  • lostpointercapture:el estado de captura del puntero ha finalizado

La mayoría de los eventos de puntero tienen alternativas directas entre los antiguos eventos de mouse. Una vez que la nueva API obtenga compatibilidad completa con el navegador, podemos sustituirla directamente con las alternativas más modernas:

const button = document.querySelector("button");

// Instead of mouseover
button.addEventListener('mouseover', doSomething);

// We can use pointerover
button.addEventListener('pointerover', doSomething);

Interactuar con un ratón debería ser el mismo en ambos casos. Sin embargo, usar los dedos o un lápiz óptico será más fácil de programar con la nueva API.

Reconocer el tipo de entrada

Una característica impresionante de la API de Pointer Events es que puede indicar qué tipo de entrada se ha utilizado. Esto puede ser útil cuando desea ignorar algunos de los métodos de entrada o proporcionar comentarios especiales para cada uno.

button.addEventListener('pointereover', function(ev){
  switch(ev.pointerType) {
    case 'mouse':
      // The used device is a mouse or trackpad.
      break;
    case 'touch':
      // Input via touchscreen.
      break;
    case 'pen':
      // Stylus input.
      break;
    default:
      // Browser can't recognize the used device.
      break;
  }
});

Otras Propiedades

La interfaz de Pointer Events también proporciona algunos otros datos interesantes. Incluye todas las propiedades de MouseEvent además de lo siguiente:

  • pointerId:ID único para el puntero que causa el evento.
  • ancho y alto:tamaño del área de contacto en píxeles.
  • presión:presión del tacto, si está disponible.
  • tiltX e tiltY:el ángulo en el que un lápiz táctil toca la pantalla.
  • isPrimary:determina si el dispositivo puntero primario ha emitido un evento.

Soporte del navegador

Los eventos de puntero son bastante nuevos, por lo que la compatibilidad con los navegadores aún no es perfecta. Chrome (de escritorio y móvil), Edge, IE y Opera tienen soporte completo; Firefox y Safari no.

¿Puedo usar

Para verificar si un navegador tiene la API de eventos de puntero, puede usar el objeto de ventana:

if (window.PointerEvent) {
  // Pointer Events enabled.
} else {
  // Pointer Events not supported
}

También está disponible un popular pollyfill de código abierto para aquellos que no quieren esperar a la adopción completa del navegador.

Conclusión

Aunque todavía no tiene compatibilidad total con el navegador, la API de Pointer Events finalmente se hará cargo de los antiguos eventos del mouse. Proporciona muchas características geniales que aumentarán la accesibilidad web y permitirán a los desarrolladores crear aplicaciones táctiles y basadas en lápiz óptico más avanzadas.

Si desea obtener más información sobre la API de Power Events, le recomendamos que consulte estos recursos:

  • Señalando el camino a seguir:artículo sobre Google Developers
  • Eventos de Pointer - Nivel 2 - Borrador del editor W3C
  • Eventos de puntero en MDN

No