Señalar el camino a seguir

Apuntar a objetos en la Web solía ser simple. Tenías un mouse, lo moviste a veces presionaban botones, y eso fue todo. Todo lo que no fuera mouse se emulaba como uno, y los desarrolladores sabían exactamente con qué contar.

Sin embargo, simple no necesariamente significa bueno. Con el tiempo, se volvió cada vez más importante que no todo fuera (o fingiera ser) un mouse: podías tener bolígrafos sensibles a la presión y compatibles con la inclinación, para brindar una increíble libertad creativa podrías usarías los dedos, por lo que todo lo que necesitabas era el dispositivo y tu mano; y bueno, ¿por qué no uses más de un dedo mientras lo haces?

Tuvimos eventos táctiles. para ayudarnos con eso, pero son una API completamente independiente específicamente para el tacto, lo que te obliga a codificar dos modelos de eventos separados si admitir el mouse y el tacto. Chrome 55 se envía con un estándar más nuevo que unifica ambos modelos: eventos de puntero.

Un modelo de evento único

Los eventos de puntero unifican el modelo de entrada de puntero para el navegador, que combina la función táctil, los bolígrafos y los mouses en un solo conjunto de eventos. Por ejemplo:

document.addEventListener('pointermove',
    ev => console.log('The pointer moved.'));
foo.addEventListener('pointerover',
    ev => console.log('The pointer is now over foo.'));

Esta es una lista de todos los eventos disponibles, que debería resultarte familiar si estás familiarizado con los eventos del mouse:

Diferentes tipos de entrada

En general, los eventos de puntero te permiten escribir código de manera independiente de la entrada sin tener que registrar controladores de eventos separados para los distintos dispositivos de entrada. Por supuesto, aún deberás tener en cuenta las diferencias entre los tipos de entrada, por ejemplo, se aplica el concepto de colocar el cursor sobre un elemento. Si quieres diferenciar diferentes tipos de dispositivos de entrada, quizás para proporcionar código o funcionalidad independientes para diferentes entradas; sin embargo, puedes hacerlo desde dentro de los mismos controladores de eventos con la propiedad pointerType del PointerEvent interfaz de usuario. Por ejemplo, si estuvieras programando un panel lateral de navegación, podrías tener la siguiente lógica en tu evento pointermove:

switch(ev.pointerType) {
    case 'mouse':
    // Do nothing.
    break;
    case 'touch':
    // Allow drag gesture.
    break;
    case 'pen':
    // Also allow drag gesture.
    break;
    default:
    // Getting an empty string means the browser doesn't know
    // what device type it is. Let's assume mouse and do nothing.
    break;
}

Acciones predeterminadas

En los navegadores con opciones táctiles, se usan ciertos gestos para hacer que la página se desplace, haga zoom o se actualice. En el caso de los eventos táctiles, seguirás recibiendo eventos mientras estos eventos se producen acciones. Por ejemplo, se seguirá activando touchmove mientras el usuario se desplaza.

Con los eventos del puntero, cada vez que se activa una acción predeterminada, como el desplazamiento o el zoom, recibirás un evento pointercancel que te informará que el navegador completó control del puntero. Por ejemplo:

document.addEventListener('pointercancel',
    ev => console.log('Go home, the browser is in charge now.'));

Velocidad integrada: Este modelo proporciona un mejor rendimiento de forma predeterminada. en comparación con los eventos táctiles, en los que necesitarías usar objetos de escucha de eventos pasivos para lograr el mismo nivel de capacidad de respuesta.

Puedes impedir que el navegador tome el control con la touch-action propiedad de CSS. Si se establece en none en un elemento, se inhabilitarán todos acciones definidas por el navegador que se inician sobre ese elemento. Pero hay varios otros valores para un control más detallado, como pan-x, para permitir el navegador reaccione al movimiento en el eje x, pero no en el eje y. Chrome 55 admite los siguientes valores:

Captura del puntero

¿Alguna vez pasaste una hora frustrante para depurar un mouseup dañado? hasta que te diste cuenta de que es porque el usuario suelta el botón fuera de tu objetivo de clics? ¿No? Bueno, quizás solo seré yo.

Sin embargo, hasta ahora no había una forma realmente buena de abordar este problema. Claro, puedes configurar el controlador mouseup en el documento y guardar algún estado en tu aplicación para hacer un seguimiento de los aspectos. Esa no es la solución más limpia, sobre todo si desea crear un componente web y tratar de que todo esté lindo y aisladas.

Los eventos de puntero son una solución mucho mejor: puedes capturar el puntero, para asegurarte de obtener ese evento pointerup (o cualquier otro de sus eventos elusivos amigos).

const foo = document.querySelector('#foo');
foo.addEventListener('pointerdown', ev => {
    console.log('Button down, capturing!');
    // Every pointer has an ID, which you can read from the event.
    foo.setPointerCapture(ev.pointerId);
});

foo.addEventListener('pointerup', 
    ev => console.log('Button up. Every time!'));

Navegadores compatibles

Al momento de la redacción, los eventos de puntero son compatibles con Internet Explorer 11, Microsoft Edge, Chrome y Opera, y parcialmente compatibles con Firefox. Puedes Encuentra una lista actualizada en caniuse.com.

Puedes usar el polyfill de eventos de puntero para lo siguiente: para llenar los vacíos. Como alternativa, comprobar la compatibilidad del navegador en el tiempo de ejecución sencillo:

if (window.PointerEvent) {
    // Yay, we can use pointer events!
} else {
    // Back to mouse and touch events, I guess.
}

Los eventos de puntero son un gran candidato para la mejora progresiva: modifica tus métodos de inicialización para hacer la verificación anterior, agrega un evento de puntero en el bloque if y mueve los controladores de eventos de mouse/táctil al Bloque else.

Así que no dejes de probarlos y contarnos tu opinión.