Comentário: Suporte de reconhecimento recém -adicionado para entrada avançada do usuário no IE10, dê um exemplo: registre uma operação de clique e você pode saber qual dispositivo o clique do usuário atual é: seja um clique de dedos, um clique do mouse ou um clique da caneta (o dispositivo do tablet terá um Stylus)
IE10 Recém -adicionado suporte de reconhecimento para entrada avançada do usuário, por exemplo: registre uma operação de clique e, através de uma frase addEventListener, você pode saber qual dispositivo o clique do usuário atual é, um clique de dedos, um clique do mouse ou um clique da caneta (o dispositivo tablet terá uma caneta).
O código acima pode identificar qual dispositivo o clique do usuário atual é e também faz julgamentos através do método de retorno de chamada e.PointerType. O mouse é 4, a caneta é 3 e o dedo é 2. Quanto a que tipo de equipamento é um valor de 1, resta ser estudado.
Outra coisa a observar é que você deseja adicionar a identificação do dispositivo de entrada no JavaScript, e os eventos do método de registro também são um pouco diferentes.
addEventListener O evento adicionado é mSpointerDown
No IE10, os cliques de dedos preferidos em reconhecimento a vários dispositivos não são afetados pelo clique de função normal. No entanto, o IE10 não apenas reconhece o dispositivo de entrada do usuário, mas também suporta muitos gestos avançados.
A seguir, é apresentada uma demonstração de suporte de gesto avançado do IE10
Crie objetos de gesto
O primeiro passo no manuseio de gestos em seu site é instanciar o objeto de gesto.
var mygesture = novo MSGesture ();
Em seguida, forneça um elemento de destino para o gesto. O navegador acionará um evento de gesto para este elemento. Ao mesmo tempo, esse elemento também pode determinar o espaço de coordenadas do evento.
elm = document.getElementById (algum elemento);
mygesture.target = elm;
elm.addeventListener (MSGestureChange, manipulação);
Finalmente, diga ao objeto de gesto que os ponteiros procesam durante o reconhecimento de gestos.
Elm.addeventListener (MSpoInterDown, função (EVT) {
// adiciona o contato atual do mouse, caneta ou toque para reconhecimento de gestos
mygesture.addPointer (evt.pointerID);
});
NOTA: Não se esqueça de que você precisa usar-MS-Touch-Ação para configurar elementos para impedir que eles executem ações de toque padrão (por exemplo, PAN e ZOOM) e forneça eventos de ponteiro para entrada.
Lidar com eventos de gestosUma vez que o objeto de gesto tenha um destino válido e tenha pelo menos um ponteiro adicionado, ele começará a desencadear o evento de gestos. Os eventos de gesto podem ser divididos em dois tipos: gestos estáticos (por exemplo, clique ou segure) e gestos dinâmicos (por exemplo, encolher, girar e deslizar).
CliqueO reconhecimento mais básico de gestos são os cliques. Quando um clique é detectado, o evento MSGestureTap será acionado no elemento de destino do objeto Gesto. Ao contrário dos eventos de clique, o clique de gestos só pode ser acionado quando o usuário tocar, pressiona o botão do mouse ou usa uma caneta para tocar sem se mover. Isso geralmente é muito útil se você deseja distinguir entre os elementos de clique e arrastar do usuário.
Longa prensaUm gesto de imprensa longo refere -se à operação do usuário tocando na tela com um dedo e segurando -o por um momento e levantá -lo sem movê -lo. Durante a interação da imprensa longa, o evento MSGesturehold será disparado várias vezes para vários estados do gesto:
element.AddeventListener ("MsgestureHold", Handlehold);
Função Puxa (EVT) {
if (evt.detail & evt.msgesture_flag_begin) {
// Comece sinaliza o início de um gesto. Para o gesto de espera, isso significa que o usuário está mantendo o tempo suficiente para que o gesto se torne uma imprensa e retenção completas se o dedo for levantado.
}
if (evt.detail & evt.msgesture_flag_end) {
// final sinaliza o fim do gesto.
}
if (evt.detail & evt.msgesture_flag_cancel) {
// Cancelar sinais O usuário iniciou o gesto, mas o cancelou. Para manter, isso ocorre quando o usuário se arrasta antes de levantar. Esse sinalizador é enviado junto com a bandeira final, sinalizando o reconhecimento de gestos está completo.
}
}
Gestos dinâmicos (contração, rotação, deslizamento e arrasto)
Gestos dinâmicos (por exemplo, encolhimento ou rotação) serão relatados na forma de uma transformação, que é bastante semelhante à transformação 2D CSS. Os gestos dinâmicos podem desencadear três eventos: MSGestureStart, MSGestureChange (gatilhos repetidos à medida que o gesto continua) e MSGestureEnd. Cada evento contém informações sobre escala (encolhimento), rotação, conversão e velocidade.
Como os gestos dinâmicos são relatados em conversões, será muito fácil usar o MSGesture com conversões 2D CSS para manipular elementos como fotos ou quebra -cabeças. Por exemplo, você pode ativar os elementos de dimensionamento, rotação e arrastar das seguintes maneiras:
TargetElement.AddeventListener ("MSGestureChange", ManipulateElement);
função manipulateElement (e) {
// Uncommentamento o seguinte código, se você deseja desativar a inércia embutida fornecida por reconhecimento dinâmico de gestos
// if (e.detail == e.msorge_flag_inertia)
// retornar;
var m = novo MSCSSMatrix (e.target.style.transform); // Obtenha as últimas transformadas CSS no elemento
e.target.style.Transform = m
.Translate (E.OffsetX, E.Offsety) // Mova a origem da transformação sob o centro do gesto
.rotate (e.rotation * 180 / math.pi) // Aplicar rotação
.SCALE (E.SCALE) // Aplicar escala
.TRANSLATE (E.Translationx, E.Translationy) // Aplicar tradução
.Translate (-e.offsetx, -e.offsety); // Mova a origem da transformação de volta
}
Gestos dinâmicos, como zoom e rotação, podem suportar operações de mouse, que podem ser alcançadas usando Ctrl ou modificadores de mudança, respectivamente, enquanto giram a roda do mouse.