Eventos de puntero y de gesto en Internet Explorer 10

Nota  Para obtener información general más actualizada sobre estos temas, consulta los temas Eventos de puntero y Eventos de gesto.

Precaución  La especificación Eventos de puntero del W3C se ha sometido a algunas revisiones desde que se implementara en Internet Explorer 10. Además, los prefijos de proveedor MS en la API de eventos de puntero están en desuso a partir de Internet Explorer 11. Consulta Actualizaciones de eventos de puntero para ver un resumen de los cambios y los procedimientos recomendados de compatibilidad.

Internet Explorer 10 y las aplicaciones de la Tienda Windows con JavaScript para Windows 8 incorporan compatibilidad en la plataforma web para controlar las entradas tanto táctiles como manuscritas. En lugar de pedirte que crees un código que controle cada tipo de entrada de manera independiente, Internet Explorer 10 presenta el concepto de puntero.

Un puntero es cualquier punto de contacto en la pantalla: puede ser un mouse, un dedo o un lápiz. Ahora, puedes ofrecer fácilmente una experiencia coherente en el hardware de entrada y en los factores de forma escribiendo en un único conjunto de eventos de puntero que encapsulan entrada desde el mouse, el toque y el lápiz.

Eventos de puntero

Similares a los eventos de mouse, los eventos de puntero se activan con las acciones abajo, mover, arriba, sobre y fuera de, para cada puntero:

A diferencia de un mouse, es posible 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.

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 MSPointerCancel indica la cancelación de punteros.

Compatibilidad de mouse

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

Detección de características

Esta es la mejor manera para detectar la compatibilidad con los eventos de puntero:


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

Ten en cuenta que esta detección de características no indica que el dispositivo admita entrada táctil o manuscrita. Por el contrario, indica que la plataforma activará eventos de puntero para cualquier hardware que esté presente en el sistema.

En el siguiente ejemplo, se muestra una aplicación de pintura con dedos básica que funciona con entradas táctiles, manuscritas y de mouse mediante eventos de puntero.


<!DOCTYPE html>
<html>
<head>
  <title>Scribble touch example</title>
<style>
  html { 
    -ms-touch-action: none; /* Direct all pointer events to JavaScript code. */
  }
</style>

<script>
  window.addEventListener('load', function () {
    var canvas = document.getElementById("drawSurface"),
    context = canvas.getContext("2d");
    if (window.navigator.msPointerEnabled) {
      canvas.addEventListener("MSPointerMove", paint, false);
    }
    else {
      canvas.addEventListener("mousemove", paint, false);
    }
    function paint(event) {
      // paint a small rectangle every time the event fires. 
      context.fillRect(event.clientX, event.clientY, 5, 5);
    }
  });
</script>

</head>
<body>

  <canvas id="drawSurface" width="500px" height="500px" style="border:1px solid black;">Canvas isn't supported by this browser or document mode</canvas>
</body>
</html>


Procedimientos comunes para optimizar la entrada táctil

Internet Explorer 10 proporciona un control predeterminado común para las interacciones táctiles básicas, por ejemplo:

  • Panorámica para regiones desplazables
  • Alejar zoom
  • Menús contextuales al pulsar y sostener
  • Selección táctil

Como estas características funcionan automáticamente, los sitios y aplicaciones ofrecen una gran experiencia táctil de manera predeterminada. No obstante, quizás quieras deshabilitarlas en favor de tu propia experiencia.

Pruebas de compatibilidad táctil

Probar la compatibilidad táctil, y si se admite la entrada multitáctil, es fácil con la propiedad msMaxTouchPoints. Para comprobar si un dispositivo admite entrada táctil y, en este caso, cuántos puntos, usa lo siguiente:

// To test for touch capable hardware 
if(navigator.msMaxTouchPoints) { ... }

// To test for multi-touch capable hardware
if(navigator.msMaxTouchPoints && navigator.msMaxTouchPoints > 1) { ... }

// To get the maximum number of points the hardware supports
var touchPoints = navigator.msMaxTouchPoints;


Panorámica y zoom

Los eventos de puntero no se activarán mientras se realiza un movimiento panorámico o zoom. En escenarios como el de la aplicación de pintura del ejemplo anterior, puedes desactivar la panorámica y el zoom en una región con el fin de utilizar estos eventos para tus propios fines. Para ello, se deben usar hojas de estilo en cascada (CSS), por ejemplo.


.disablePanZoom {
  -ms-touch-action: none; /* Disables all pan/zoom behaviors and fire pointer events in JavaScript instead. */
}

Selección táctil

Si quieres usar la funcionalidad táctil para seleccionar una palabra en Internet Explorer 10, debes pulsar sobre el texto o cerca de él. Si quieres deshabilitar la selección de texto, hazlo igual que hacías en Windows Internet Explorer 9.


element.addEventListener("selectstart", function(e) { e.preventDefault(); }, false);
 // Disables selection


Menús contextuales

Cuando se mantienen presionados determinados elementos en Windows Internet Explorer, se muestra un objeto visual que, al mantenerlo presionado, indica que va a aparecer un menú contextual. Si levantas el dedo, se muestra el menú contextual. Si arrastras el dedo alejándolo, el objeto visual se descarta y no aparece el menú contextual.

Si quieres usar tu propio menú contextual, aún puedes hacerlo con Internet Explorer 10. Simplemente llama a event.preventDefault en el evento contextmenu y ejecuta el código para mostrar tu menú contextual. De forma automática, Internet Explorer hace que tu menú contextual funcione con entrada táctil y proporciona el mismo objeto visual de sugerencia al pulsar y sostener. En este ejemplo se usa un evento contextmenu para detectar cuándo el usuario presionó un elemento, lo mantuvo presionado y lo soltó. Cuando el usuario levanta el dedo, se desencadena el evento contextmenu y se muestra un mensaje.


<!DOCTYPE html>
<html >
<head>
     <title>Touch and hold example</title>
  <style>
   
    #touchspot {
      width:100px;
      height:100px;
      background-color:aquamarine;
      border:solid 2px black;
    }
  </style>

</head>
<body>
  <div id="touchspot">Touch and hold me</div>

  <script>
    var elm = document.getElementById("touchspot");

    elm.addEventListener("contextmenu", function (e) {
      e.target.innerHTML = "Touch has pressed, held, and lifted, or mouse has been right clicked. Time to show a custom menu.";
      e.preventDefault();    // Disables system menu
    }, false);

  </script>
</body>
</html>


Si no quieres tener ningún menú contextual, por ejemplo, en un juego que requiere que el usuario sostenga el dedo pulsado un cierto tiempo, quizás quieras deshabilitar tanto el menú contextual como el objeto visual de sugerencia. Para ello, solo tienes que cancelar dos eventos.



 // Disables visual
element.addEventListener("MSHoldVisual", function(e) { e.preventDefault(); }, false);
// Disables menu
element.addEventListener("contextmenu", function(e) { e.preventDefault(); }, false);
 

Objeto y eventos de gesto

Además de los eventos de puntero, Windows 8 tiene la capacidad de reconocer interacciones complejas llamadas gestos (como alejar, deslizar los dedos, etc.) de manera coherente en todas las aplicaciones.

Nota  Las API descritas en esta sección no se admiten en Windows 7.

El objeto MSGesture usado en el ejemplo anterior habilita gestos de alto nivel, como sostener, mover panorámicamente y pulsar, sin que tengas que capturar todos los eventos de puntero. Lo que necesitas es capturar el evento onmspointerdown y configurar el objeto MSGesture con el destino (el objeto del que quieres los eventos de gestos) y el pointerId. Si no creas instancias de un objeto MSGesture ni lo configuras, tu elemento solo activará eventos de puntero.

Los eventos de gestos incorporan más información que los eventos de puntero. Por ejemplo, cuando un usuario toca con el dedo y lo retira inmediatamente, activa un evento MSGestureTap. Si el usuario toca la superficie y mantiene el dedo en ella, activa un evento MSGestureHold.

Cuando el usuario desliza el dedo rápidamente, se activan los eventos MSGestureStart, MSGestureChange y MSGestureEnd.

Si el usuario pasa el dedo rápidamente y lo levanta, se activa un evento MSInertiaStart.

Nota  Puedes detectar cuándo un gesto está en su estado de inercia cuando la propiedad detail del evento MSGestureChange es igual a event.MSGESTURE_FLAG_INERTIA.

Inercia es el movimiento que continúa después de retirar el contacto con la pantalla. La compatibilidad con la inercia está integrada en los objetos de gestos en Internet Explorer 10 y no requiere código adicional aparte de los controladores de eventos. El evento MSInertiaStart va seguido de una serie de eventos MSGestureChange, dependiendo de la velocidad del gesto de deslizar rápidamente, antes de que se active un evento MSGestureEnd. El evento MSInertiaStart se activa solo cuando hay velocidad suficiente para deslizar el dedo rápidamente y puede ayudar al código a diferenciar entre un movimiento lento y uno rápido.

Estos son los principales eventos de gestos:

El objeto MSGestureEvent que se pasa a todos los eventos devuelve propiedades que ayudan a tu aplicación a determinar el estado del objeto que se está manipulando. Para ver si el usuario ha intentando acercar, alejar o cambiar de tamaño el elemento, usa la propiedad scale. Si el usuario gira el elemento en la pantalla, puedes obtener el ángulo en radianes con la propiedad rotation. Estas dos propiedades son cambios que se han realizado desde se que produjo el último MSGestureEvent.

Indicadores de gestos

Los indicadores MSGesture devuelven el estado de un objeto de evento, como MSGestureStart, MSGestureChange o MSGestureHold. Son:

  • MSGESTURE_FLAG_NONE , ningún estado especial.
  • MSGESTURE_FLAG_BEGIN, indica el comienzo de un evento de gesto.
  • MSGESTURE_FLAG_END, indica el final de un evento de gesto.
  • MSGESTURE_FLAG_CANCEL, indica que el evento de gesto se ha cancelado.
  • MSGESTURE_FLAG_INERTIA , indica cuando el equipo está en estado de inercia.

Por ejemplo, si un usuario desliza el dedo rápidamente por la pantalla, los eventos y detalles responderán de la siguiente manera:

  • El evento MSGestureStart se activa junto con el indicador MSGESTURE_FLAG_BEGIN.
  • A medida que el usuario mueve el dedo, el evento MSGestureChange se activa repetidamente y se pasa MSGESTURE_FLAG_NONE mediante la propiedad detail.
  • Cuando el usuario levanta el dedo, se activa el evento MSInertiaStart y se pasa el indicador MSGESTURE_FLAG_INERTIA.
  • Mientras el elemento se siga moviendo por la pantalla, el evento MSGestureChange continúa activándose y pasando el indicador MSGESTURE_FLAG_INERTIA.
  • Cuando el movimiento cesa, se activa el evento MSGestureEnd y se pasan dos indicadores, MSGESTURE_FLAG_INERTIA y MSGESTURE_FLAG_END, con la propiedad detail.

Si un usuario toca la pantalla, mantiene pulsado durante unos segundos y después mueve el dedo, los eventos y detalles serán los siguientes:

  • Después de unos segundos, se activa el evento MSGestureHold y se pasa el indicador MSGESTURE_FLAG_BEGIN.
  • Cuando el usuario comienza a mover el dedo, se activa el evento MSGestureHold y se pasan los indicadores MSGESTURE_FLAG_END y MSGESTURE_FLAG_CANCEL. Esto indica que se ha cancelado el estado de mantener pulsado.
  • A medida que el usuario mueve el dedo, el evento MSGestureChange se activa repetidamente y se pasa MSGESTURE_FLAG_NONE mediante la propiedad detail. A partir de aquí, los pasos continúan como en la secuencia anterior.
  • Cuando el usuario levanta el dedo, se activa el evento MSInertiaStart y se pasa el indicador MSGESTURE_FLAG_INERTIA.
  • Mientras el elemento se siga moviendo por la pantalla, el evento MSGestureChange continúa activándose y pasando el indicador MSGESTURE_FLAG_INERTIA.
  • Cuando el movimiento cesa, se activa el evento MSGestureEnd y se pasan dos indicadores, MSGESTURE_FLAG_INERTIA y MSGESTURE_FLAG_END, con la propiedad detail.

Para obtener una aplicación de muestra completa que muestra eventos de gestos en acción, consulta el tema de referencia de MSGesture.

Temas relacionados

Eventos de gesto
Eventos de puntero

 

 

Mostrar:
© 2014 Microsoft