Eventos de Ponteiro

A partir do Windows 8, o Internet Explorer dá suporte a Eventos de Ponteiro do W3C para lidar com a entrada do usuário. Eventos de ponteiro são modelados com base em eventos tradicionais do mouse, com a diferença de que eles usam o conceito abstrato de um ponteiro para aplicação em todas as modalidades de entrada do usuário, incluindo mouse, toque e caneta. Use eventos de ponteiro para criar uma experiência de usuário perfeita entre métodos de entrada do usuário, escrevendo em um único conjunto de eventos que operam entre recursos de hardware.

Eventos de ponteiro e o objeto PointerEvent

O objeto PointerEvent herda de MouseEvent e é expedido em interações semelhantes do usuário.

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

 

O objeto PointerEvent fornece todas as propriedades usuais esperadas em eventos de mouse (como coordenadas clientX/clientY, o elemento target e propriedades button/buttons), bem como estas propriedades adicionais para ajudá-lo a diferenciar entre tipos de entrada e características:

Propriedade PointerEventDescrição

height

A altura (magnitude no eixo Y), em pixels CSS, da geometria de contato do ponteiro.

isPrimary

Retorna se o ponteiro associado ao evento é o ponteiro principal para a interação atual com mouse, toque ou caneta.

pointerId

O identificador exclusivo do contato para toque, mouse ou caneta.

pointerType

Retorna se a origem do evento é toque, caneta ou mouse.

pressure

Retorna a pressão normalizada da entrada do ponteiro no intervalo de [0,1], em que 0 e 1 representam a pressão mínima e máxima que o hardware é capaz de detectar, respectivamente.

tiltX

Retorna o ângulo entre o plano Y-Z e o plano que contém o eixo da caneta e o eixo Y no intervalo de -90 a +90. Uma inclinação X positiva ocorre para a direita.

tiltY

Retorna o ângulo entre os planos X-Z e X transdutor. Uma inclinação Y positiva ocorre em direção ao usuário.

width

Retorna a largura (magnitude no eixo X), em pixels CSS, da geometria de contato do ponteiro.

 

Compatibilidade do mouse

Após o disparo de eventos do ponteiro, o IE aciona eventos de mouse para o contato principal (por exemplo, o primeiro dedo na tela). Isso permite que sites existentes que se baseiam em eventos de mouse continuem a funcionar corretamente.

Em contraste com um mouse, é possível ter vários ponteiros na tela de uma única vez (por exemplo, com 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.

Detecção de recursos e testes de suporte a toque

Use a interface PointerEvent para testar o suporte a evento de ponteiro:


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

Lembre-se de que a detecção de recursos de eventos de ponteiro não indica se o dispositivo propriamente dito é compatível com entrada por toque ou à caneta. A propriedade PointerEvent só verifica se a plataforma vai disparar eventos de ponteiro para qualquer hardware que esteja presente no sistema.

Para testar a capacidade de toque e o suporte para multitoque, use a propriedade 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;

Controlando a manipulação de toque padrão

A partir do Windows 8, o IE fornece manipulação padrão para interações comuns por toque, incluindo movimento panorâmico para regiões de rolagem, zoom com pinçagem e suporte para toque em operações de arrastar e soltar em HTML5. O toque é ativado por uma sequência de interações do usuário (pressionar, segurar e arrastar). Você pode usar a propriedade CSS touch-action para especificar se e como determinada região da página pode ser manipulada por entrada por toque e por comportamentos padrão de manipulação por toque.

A regra de estilo a seguir desabilita toda a manipulação por toque padrão e orienta todos os eventos de ponteiro para o código JavaScript:


touch-action: none;

Veja Controlando a experiência de toque padrão para saber mais detalhes.

Capturando eventos de ponteiro em um elemento

Em alguns casos, é útil atribuir um ponteiro específico a um elemento, para garantir que esse elemento continue a receber eventos de ponteiro mesmo que o contato se afaste dele.

Por exemplo, se um botão da interface do usuário no seu aplicativo Web for tocado e segurado, e o usuário deslizar o dedo para longe dele antes de levantar o dedo (quebrando o contato), o botão talvez não receba o evento pointerup. Isso poderia fazer com que o botão permanecesse pressionado para sempre. Ao atribuir o ponteiro ao elemento de botão, o botão recebe eventos de ponteiro, incluindo o evento pointerup, que sinaliza que o botão deve retornar ao seu estado inicial.

Você pode chamar o método setPointerCapture de um objeto de elemento para atribuir um pointerId específico a esse elemento:


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

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

Quando um ponteiro é capturado para um elemento, os elementos pai e ancestral recebem um evento gotpointercapture durante a fase de captura e expansão.

A captura é liberada quando o ponteiro é removido (pointerup) ou explicitamente liberado chamando o método releasePointerCapture. Há também casos em que o elemento pode perder a captura. Por exemplo, se o contato se mover para fora da janela, ou se algum outro elemento capturar o toque, o elemento que tinha a captura irá perdê-la. O elemento que perdeu a captura recebe um evento lostpointercapture.

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 pointercancel. Isso dá a você a chance de lidar com qualquer limpeza necessária. Por exemplo, se o seu aplicativo mantiver uma lista de ponteiros, você poderá escutar o evento pointercancel para saber quando remover determinado ponteiro dessa lista.

Observações sobre compatibilidade

Para estar em conformidade com a Recomendação de Candidato da especificação de Eventos de Ponteiro W3C, a implementação de eventos de ponteiro do Internet Explorer 11 mudou ligeiramente em relação ao Internet Explorer 10. Para ver os detalhes completos, confira Atualizações de eventos de ponteiro no Guia de compatibilidade do IE.

O polyfill HandJSJavaScript fornece uma biblioteca que você pode usar para gravar no modelo de eventos de ponteiro em navegadores que ainda não dão suporte para Eventos de Ponteiro do W3C. Para ver uma demonstração, confira Criando um joystick de toque virtual com Hand.JS.

Referência de API

PointerEvent

Amostras e tutoriais

Prepare o seu site para navegação por toque
Amostra de ponteiros e gestos

Demonstrações do Test Drive do Internet Explorer

Mandelbrot Explorer
Superfície do navegador
Efeitos de toque
Quebra-blocos

Postagens no blog do IE

Eventos de ponteiro de transições W3C para recomendação de candidato
Saiba mais sobre eventos de ponteiro quando a W3C publicar o Last Call Working Draft (Rascunho de Trabalho de Última Chamada)
W3C cria grupo de trabalho de eventos de ponteiro
Para eventos de ponteiro interoperáveis: desenvolvendo eventos de entrada para vários dispositivos
Diretrizes para criar sites de navegação habilitados para toque
Manipulando a entrada multitoque e por mouse em todos os navegadores
Entrada por toque para IE10 e aplicativos da Windows Store

Especificação

Especificação de eventos de ponteiro

Tópicos relacionados

Criando um joystick por toque, virtual e universal, que funciona em todos os modelos de toque graças ao Hand.JS
Eventos de Gesto
Hand.js: um polyfill para dar suporte a eventos de ponteiro em todos os navegadores
Rolagem e zoom com toque
Unificando toque e mouse: como os Eventos de Ponteiro vão facilitar o suporte de toque entre navegadores

 

 

Mostrar:
© 2014 Microsoft