Eventos de puntero

A partir de Windows 8, Internet Explorer admite los eventos de puntero del W3C para controlar la entrada del usuario. Los eventos de puntero se modelan según los eventos de mouse tradicionales, excepto que usan el concepto abstracto de un puntero para aplicarlo a todas las modalidades de entrada de usuario, incluidos el mouse y la entrada táctil y manuscrita. Usa los eventos de puntero para escribir un único conjunto de eventos que funcionen en distintas funcionalidades de hardware con el fin de crear una experiencia del usuario sin problemas con todos los métodos de entrada del usuario.

Eventos de puntero y el objeto PointerEvent

El objeto PointerEvent hereda de MouseEvent, y se envía en acciones de usuario similares.

Evento de mouseEvento de puntero correspondiente
mousedown pointerdown
mouseenter pointerenter
mouseleave pointerleave
mousemove pointermove
mouseout pointerout
mouseover pointerover
mouseup pointerup

 

El objeto PointerEvent proporciona todas las propiedades habituales esperadas en eventos de mouse (como coordenadas clientX /clientY, el elemento target y las propiedades button / buttons) y estas propiedades adicionales ayudan a diferenciar entre características y tipos de entrada:

Propiedad PointerEventDescripción

height

El alto (magnitud en el eje Y), en píxeles CSS, de la geometría de contacto del puntero.

isPrimary

Indica si el puntero asociado al evento es el puntero primario del mouse, la función táctil o la interacción de lápiz actuales.

pointerId

El identificador único del contacto para la función táctil, el mouse o el lápiz.

pointerType

Devuelve si el origen del evento es la función táctil, el lápiz o el mouse.

pressure

Devuelve la presión normalizada de la entrada del puntero en el intervalo [0,1], donde 0 y 1 representan, respectivamente, el mínimo y máximo que el hardware de presión es capaz de detectar.

tiltX

Devuelve el ángulo entre el plano Y-Z y el plano que contiene el eje del lápiz y el eje Y en el intervalo de -90 a +90. Una inclinación X positiva indica a la derecha.

tiltY

Devuelve el ángulo entre los planos X-Z y transductor-X. Una inclinación Y positiva indica hacia el usuario.

width

Devuelve el ancho (magnitud en el eje X), en píxeles CSS, de la geometría de contacto del puntero.

 

Compatibilidad de mouse

Después de activar los eventos de puntero, IE activa los eventos de mouse para el contacto primario (por ejemplo, el primer dedo en la pantalla). Esto permite que los sitios web existentes basados en eventos de mouse sigan funcionando.

A diferencia de un mouse, se pueden tener varios punteros en la pantalla a la vez (por ejemplo, con hardware multitáctil). En estos escenarios, se activa un evento de puntero para cada punto de contacto, lo que facilita la construcción de sitios y aplicaciones habilitados para entrada multitáctil.

Detección de características y pruebas de compatibilidad con tecnología táctil

Usa la interfaz PointerEvent para probar la compatibilidad con eventos de puntero:


if (window.PointerEvent) {
  // Pointer events are supported.
}

Ten en cuenta que la detección de características de los eventos de puntero no indican si el dispositivo admite entrada táctil o manuscrita. La propiedad PointerEvent solo comprueba si la plataforma activará eventos de puntero para cualquier hardware que esté presente en el sistema.

Para probar la funcionalidad táctil y la compatibilidad con multitáctil, usa la propiedad maxTouchPoints:


// Test for touch capable hardware 
if(navigator.maxTouchPoints) { ... }

// Test for multi-touch capable hardware
if(navigator.maxTouchPoints && navigator.maxTouchPoints > 1) { ... }

// Check the maximum number of touch points the hardware supports
var touchPoints = navigator.maxTouchPoints;

Control de la administración táctil predeterminada

A partir de Windows 8, IE proporciona un control predeterminado para interacciones táctiles básicas, como la panorámica para regiones desplazables, reducción del zoom y compatibilidad para arrastrar y colocar HTML5 mediante entrada táctil que se activa mediante la secuencia de interacción del usuario pulsar, sostener y arrastrar. Puedes usar la propiedad CSS touch-action para especificar si (y cómo) una región determinada de una página se puede manipular mediante entrada táctil y los comportamientos predeterminados del control táctil.

La siguiente regla de estilo deshabilita todo el control táctil predeterminado y dirige todos los eventos de puntero al código JavaScript:


touch-action: none;

Consulta Control de la experiencia táctil predeterminada para obtener más información.

Capturar eventos de puntero en un elemento

En algunos casos, resulta útil asignar un puntero específico a un elemento para asegurarnos de que el elemento continúa recibiendo eventos de puntero aunque el contacto salga del elemento.

Por ejemplo, si un usuario pulsa y sostiene un botón de la interfaz de usuario de tu aplicación web y su dedo se sale del botón antes de levantarlo (interrumpiendo el contacto), el botón podría no recibir el evento pointerup. Esto podría provocar que el botón permanezca pulsado para siempre. Al asignar el puntero al elemento button, el botón recibe eventos de puntero, incluido el evento pointerup que indica al botón que vuelva a su estado inicial.

Puedes llamar al método setPointerCapture de un objeto de elemento para asignar un pointerId específico a ese elemento:


window.addEventListener('pointerdown', pointerdownHandler, false);

function pointerdownHandler (evt) {
      evt.target.setPointerCapture(evt.pointerId);
}

Cuando se captura un puntero a un elemento, los elementos primario y antecesor reciben un evento gotpointercapture durante la fase de captura y propagación.

La captura se libera cuando el puntero se quita (pointerup) o se libera explícitamente llamando al método releasePointerCapture. También hay casos en los que el elemento podría perder la captura. Por ejemplo, si el gesto táctil se desplaza fuera de la ventana o algún otro elemento lo captura, el elemento que tenía la captura la pierde. El elemento que perdió la captura recibe un evento lostpointercapture.

Cancelación de punteros

Cuando se usa la entrada táctil o manuscrita, a veces se pueden cancelar los punteros de la pantalla. Por ejemplo, si la pantalla no admite más de dos puntos táctiles simultáneos y agregas un tercer dedo a la pantalla, uno de los otros dos puntos se cancelará porque el hardware no puede realizar un seguimiento de los tres puntos. El evento pointercancel indica la cancelación de punteros. Esto te permite administrar la limpieza que sea necesaria. Por ejemplo, si tu aplicación mantiene una lista de punteros, puedes escuchar el evento pointercancel para saber cuándo quitar un puntero determinado de dicha lista.

Notas sobre compatibilidad

Para cumplir la recomendación candidata de la especificación Eventos de puntero del W3C, la implementación que hace Internet Explorer 11 de los eventos de puntero ha cambiado ligeramente respecto a la de Internet Explorer 10. Para obtener información completa, consulta Actualizaciones de eventos de puntero en el Manual de compatibilidad de IE.

El código descargable HandJS de JavaScript proporciona una biblioteca que puedes usar para escribir el modelo de eventos de puntero para distintos exploradores que no admiten aún la especificación de eventos de puntero del W3C. Para ver una demostración, consulta Crear un joystick táctil virtual universal con Hand.JS.

Referencia de API

PointerEvent

Ejemplos y tutoriales

Preparar el sitio para la entrada táctil
Muestra de punteros y gestos

Demostraciones de la versión de prueba de Internet Explorer

Mandelbrot Explorer
Browser Surface
Touch Effects
Brick Breaker

Publicaciones de IEBlog

Eventos de puntero de transiciones como recomendación candidata al W3C
Más información sobre los eventos de puntero con la publicación de W3C del borrador de trabajo de última llamada
Grupo de trabajo de eventos de puntero de cartas de constitución W3C
Hacia eventos de puntero interoperables: eventos de puntero en evolución para varios dispositivos
Instrucciones para crear sitios para pantallas táctiles
Control de entrada multitáctil y de mouse en todos los exploradores
Entrada táctil para IE10 y aplicaciones de la Tienda Windows

Especificación

Especificación de eventos de puntero

Temas relacionados

Crear un joystick táctil virtual universal que funcione con todos los modelos táctiles gracias a Hand.JS
Eventos de gesto
Hand.js: un código descargable para admitir eventos de puntero en todos los exploradores
Desplazamiento y zoom táctiles
Unificación de mouse y entrada táctil: cómo facilitarán la compatibilidad táctil entre exploradores los eventos de puntero

 

 

Mostrar:
© 2015 Microsoft