Eventos de ponteiro e de gestos no Internet Explorer 10

Observação  Para ter visões gerais mais atuais sobre esses tópicos, veja os tópicos Eventos de Ponteiro e Eventos de Gesto.

Cuidado  A especificação Eventos de Ponteiro do W3C sofreu diversas revisões desde a sua implementação no Internet Explorer 10. Além disso, os prefixos de fornecedor MS nas APIs de Evento de Ponteiro foram preteridos a partir do Internet Explorer 11. Veja Atualizações de eventos de ponteiro para acessar um resumo das alterações e práticas recomendadas de compatibilidade.

O Internet Explorer 10 e os aplicativos da Windows Store que usam JavaScript para Windows 8 introduzem suporte na plataforma Web para manipular entrada de dados por toque e caneta. Em vez de pedir que você crie um código para manipular cada tipo de entrada separadamente, o Internet Explorer 10 apresenta o conceito de ponteiro.

Um ponteiro é qualquer ponto de contato na tela: pode ser um mouse, um dedo ou uma caneta. Agora você pode facilmente fornecer uma experiência consistente entre o hardware de entrada de dados e os fatores de forma, gravando em um único conjunto de eventos de ponteiro que encapsulam entrada de dados do mouse, do toque e da caneta.

Eventos de ponteiro

Similarmente aos eventos de mouse, os eventos de ponteiro disparam para baixo, em movimento, para cima , ao passar sobre e para fora, para cada ponteiro:

Em contraste com um mouse, é possível ter vários ponteiros na tela de uma única vez (usando, por exemplo, um hardware multitoque). Nesses cenários, um evento de ponteiro separado dispara para cada ponto de contato, facilitando a criação de aplicativos e sites habilitados para multitoque.

Cancelamento de ponteiro

Ao usar o toque ou entrada com caneta, às vezes os ponteiros na tela podem ser cancelados. Por exemplo, se sua tela suporta no máximo dois pontos de toque simultâneos e você acrescenta um terceiro dedo na tela, um dos outros pontos será cancelado porque o hardware não consegue controlar os três pontos. O cancelamento do ponto é indicado pelo evento MSPointerCancel.

Compatibilidade do mouse

Após o disparo de eventos do ponteiro, o Internet Explorer 10 aciona eventos de mouse para o contato principal (por exemplo, o primeiro dedo na tela). Isso permite que sites existentes que são baseados em eventos de mouse continuem a funcionar.

Detecção de recurso

Esta é a melhor maneira de detectar o suporte a eventos de ponteiro:


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

Lembre-se de que esta detecção de recurso não é uma indicação de que o dispositivo suporta a entrada por toque ou caneta. Em vez disso, ela indica que a plataforma irá disparar eventos de ponteiro para qualquer hardware que esteja presente no sistema.

O exemplo a seguir é um aplicativo de pintura básico que funciona com o mouse, toque e caneta através de eventos de ponteiro.


<!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>


Práticas comuns para a otimização do toque

O Internet Explorer 10 oferece uma manipulação padrão comum para interações de toque básicas, por exemplo:

  • Panorâmica para regiões que podem ser roladas
  • Zoom por pinçagem
  • Menus de contexto de pressionar e manter pressionado
  • Seleção de toque

Esses recursos funcionam automaticamente para que sites e aplicativos tenham uma excelente experiência de toque por padrão. No entanto, talvez você prefira desabilitá-los.

Testando o suporte para toque

É fácil testar o suporte para toque e verificar se o multitoque é suportado usando a propriedade msMaxTouchPoints. Para verificar se um dispositivo dá suporte para toque e, em caso positivo, a quantos pontos de toque, use o seguinte:

// 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;


Movimento panorâmico e zoom

Eventos de ponteiro eventos não serão disparados durante um movimento panorâmico ou zoom. Em cenários como o exemplo de aplicação de pintura anterior, desabilite a panorâmica e o zoom em uma região de modo que você posse consumir esses eventos para a sua própria finalidade. Isso é feito usando Cascading Style Sheets (CSS), por exemplo.


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

Seleção de toque

Você pode selecionar uma palavra usando toque no Internet Explorer 10 ao tocar no texto ou próximo a ele. Se você quiser desabilitar a seleção de texto, faça isso da mesma forma que fazia no Windows Internet Explorer 9.


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


Menus contextuais

Pressionar e segurar certos elementos no Windows Internet Explorer mostra um visual estático que indica que um menu de contexto está prestes a aparecer. Se você levantar o dedo, o menu de contexto será exibido. Se você arrastar o dedo para fora, o visual é descartado e o menu de contexto não aparece.

Se quiser usar seu próprio menu de contexto, você ainda poderá fazer isso com o Internet Explorer 10. Basta chamar event.preventDefault no evento contextmenu e executar o código para exibir seu menu de contexto. O Internet Explorer automaticamente faz com que seu menu de contexto funcione com toque e fornece a mesma dica visual ao pressionar e segurar. Este exemplo usa um evento contextmenu para detectar quando o usuário pressionou e segurou um elemento. Quando o usuário levanta o dedo, o evento contextmenu é acionado e uma mensagem é exibida.


<!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>


Se você não quiser um menu de contexto, como no caso de um jogo que requer que o usuário mantenha o dedo pressionado por algum tempo, então você provavelmente vai preferir desativar o menu de contexto padrão e a dica visual. Para fazer isso, basta cancelar dois eventos.



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

Objetos e eventos de gesto

Além de eventos de ponteiro, a plataforma do Windows 8 tem a capacidade de reconhecer manipulações complexas chamadas gestos (como pinçar, passar o dedo, etc.) de maneira consistente entre os aplicativos.

Observação  As APIs descritas nesta seção não são suportadas no Windows 7.

O objeto MSGesture usado no exemplo anterior possibilita gestos de nível superior, como segurar, fazer movimento panorâmico e tocar facilmente, sem que você mesmo precise capturar cada evento de ponteiro. O problema é que você precisa capturar o evento onmspointerdowne configurar o objeto MSGesture com o destino (o objeto de onde você quer os eventos de gesto) e o pointerId. Sem instanciar e configurar um objeto MSGesture, seu elemento dispara apenas eventos de ponteiro.

Os eventos de gesto incorporam mais informações do que os eventos de ponteiro. Por exemplo, quando um usuário toca e tira o dedo imediatamente, ele dispara um evento MSGestureTap. Se o usuário toca na superfície e mantém o dedo ali, ele dispara um evento MSGestureHold.

Quando o usuário passa seu dedo, os eventos os eventos MSGestureStart, MSGestureChange e MSGestureEnd são disparados.

Se o usuário passa o dedo rápido e levanta o dedo, um evento MSInertiaStart é disparado.

Observação  Você pode detectar quando um gesto está na fase de inércia quando a propriedade detail do evento MSGestureChange é igual a event.MSGESTURE_FLAG_INERTIA.

A inércia é um movimento que continua mesmo após não haver mais contato com a tela. O suporte para inércia é incorporado aos objetos de gesto no Internet Explorer 10 e não requer código adicional além dos manipuladores de eventos. O evento MSInertiaStart é seguido de uma série de eventos MSGestureChange, dependendo da velocidade do gesto de passar o dedo, antes do evento MSGestureEnd ser disparado. O evento MSInertiaStart é disparado apenas quando há velocidade suficiente para passar o dedo e pode ajudar o código a diferenciar um movimento lento de um movimento rápido.

Aqui estão os principais eventos de gesto:

O objeto MSGestureEvent que é transmitido a cada evento retorna as propriedades que ajudam o aplicativo a determinar o estado do objeto que está sendo manipulado. Para verificar se o usuário tentou aplicar zoom ou redimensionar o elemento, use a propriedade scale. Se o usuário girar o elemento na tela, você poderá obter o ângulo em radianos com a propriedade rotation. Essas duas propriedades são alterações que foram feitas desde que ocorreu o último MSGestureEvent.

Sinalizadores de gestos

Os sinalizadores MSGesture retornam o status de um objeto de evento, como MSGestureStart, MSGestureChange ou MSGestureHold. São eles:

  • MSGESTURE_FLAG_NONE, nenhum status especial.
  • MSGESTURE_FLAG_BEGIN, sinaliza o início de um evento de gesto.
  • MSGESTURE_FLAG_END, sinaliza o fim de um evento de gesto.
  • MSGESTURE_FLAG_CANCEL, sinaliza que o evento de gesto foi cancelado.
  • MSGESTURE_FLAG_INERTIA, sinaliza quando o computador está na fase de inércia.

Por exemplo, se um usuário passar o dedo na tela, os eventos e os detalhes responderão assim:

  • O evento MSGestureStart será disparado com o sinalizador MSGESTURE_FLAG_BEGIN.
  • Assim que o usuário movimenta o dedo, o evento MSGestureChange é disparado repetidamente e o sinalizador MSGESTURE_FLAG_NONE é transmitido com a propriedade de detalhes.
  • Quando o usuário levanta o dedo, o evento MSInertiaStart é disparado, transmitindo o sinalizador MSGESTURE_FLAG_INERTIA.
  • Desde que o elemento ainda esteja se movimentando na tela, o elemento MSGestureChange continua a ser disparado e o sinalizador MSGESTURE_FLAG_INERTIA é transmitido.
  • Quando acaba o movimento, o evento MSGestureEnd é disparado e os sinalizadores MSGESTURE_FLAG_INERTIA e MSGESTURE_FLAG_END são transmitidos com a propriedade de detalhes.

Se um usuário tocar na tela e pressionar por alguns segundos e, depois, movimentar o dedo, os eventos e os detalhes serão assim:

  • Após alguns segundos, o evento MSGestureHold é disparado, transmitindo o sinalizador MSGESTURE_FLAG_BEGIN.
  • Quando o usuário começa a movimentar o dedo, o evento MSGestureHold é disparado, transmitindo os sinalizadores MSGESTURE_FLAG_END e MSGESTURE_FLAG_CANCEL. Isso indica que o usuário parou de pressionar.
  • Assim que o usuário movimenta o dedo, o evento MSGestureChange é disparado repetidamente e o sinalizador MSGESTURE_FLAG_NONE é transmitido com a propriedade de detalhes. A partir daqui, as etapas continuam como na sequência anterior.
  • Quando o usuário levanta o dedo, o evento MSInertiaStart é disparado, transmitindo o sinalizador MSGESTURE_FLAG_INERTIA.
  • Desde que o elemento ainda esteja se movimentando na tela, o elemento MSGestureChange continua a ser disparado e o sinalizador MSGESTURE_FLAG_INERTIA é transmitido.
  • Quando acaba o movimento, o evento MSGestureEnd é disparado e os sinalizadores MSGESTURE_FLAG_INERTIA e MSGESTURE_FLAG_END são transmitidos com a propriedade de detalhes.

Para ver um aplicativo de exemplo completo que mostra eventos de gesto em ação, consulte o tópico de referência de MSGesture.

Tópicos relacionados

Eventos de Gesto
Eventos de ponteiro

 

 

Mostrar:
© 2014 Microsoft. Todos os direitos reservados.