Comentario: Soporte de reconocimiento recientemente agregado para la entrada avanzada del usuario en IE10, dar un ejemplo: Registre una operación de clic y puede saber qué dispositivo es el clic del usuario actual, ya sea que sea un dedo, un clic del mouse o un stylus haga clic (el dispositivo de tableta tendrá un lápiz óptico)
IE10 Soporte de reconocimiento recientemente agregado para la entrada avanzada del usuario, por ejemplo: registre una operación de clic, y a través de una oración AddEventListener, puede saber qué dispositivo es el clic actual del usuario, un dedo con el dedo, un clic del mouse o un clic con lápiz óptico (el dispositivo de tableta tendrá un lápiz óptico).
El código anterior puede identificar qué dispositivo es el clic del usuario actual, y también realiza juicios a través del método de devolución de llamada E.PointerType. El mouse es 4, el lápiz óptico es 3 y el dedo es 2. En cuanto a qué tipo de equipo es un valor de 1, queda por estudiar.
Otra cosa a tener en cuenta es que desea agregar la identificación del dispositivo de entrada en JavaScript, y los eventos del método de registro también son un poco diferentes.
addEventListener El evento agregado es mspointerdown
En IE10, los clics de los dedos que se prefieren en reconocimiento de tales diversos dispositivos no se ven afectados por el clic normal de la función. Sin embargo, IE10 no solo reconoce el dispositivo de entrada del usuario, sino que también admite muchos gestos avanzados.
La siguiente es una demostración del soporte de gestos avanzados IE10
Crear objetos de gestos
El primer paso para manejar los gestos en su sitio web es instanciar el objeto de gesto.
var mygesture = new msgesture ();
A continuación, proporcione un elemento objetivo para el gesto. El navegador activará un evento de gesto para este elemento. Al mismo tiempo, este elemento también puede determinar el espacio coordinado del evento.
Elm = document.getElementById (someElement);
mygesture.target = elm;
Elm.AdDeventListener (MsgestureChange, Handlegesture);
Finalmente, dígale al objeto de gesto que duele procesar durante el reconocimiento de gestos.
Elm.AdDeventListener (mSpointerdown, function (EVT) {
// Agrega el contacto actual del mouse, la pluma o el tacto para el reconocimiento de gestos
mygesture.addpointer (evt.pointerid);
});
Nota: No olvide que necesita usar --ms-touch-acción para configurar elementos para evitar que realicen acciones táctiles predeterminadas (por ejemplo, PAN y Zoom), y proporcionar eventos de puntero para la entrada.
Manejar eventos de gestosUna vez que el objeto de gesto tiene un objetivo válido y tiene al menos un puntero agregado, comenzará a activar el evento de gesto. Los eventos de gestos se pueden dividir en dos tipos: gestos estáticos (por ejemplo, clic o retener) y gestos dinámicos (por ejemplo, encogimiento, giro y deslizamiento).
Hacer clicEl reconocimiento de gestos más básico son los clics. Cuando se detecta un clic, el evento MsgestUreTap se activará en el elemento de destino del objeto de gesto. A diferencia de los eventos de clic, los gestos de clic solo se pueden activar cuando el usuario toca, presiona el botón del mouse o usa un lápiz óptico para tocar sin moverse. Esto generalmente es muy útil si desea distinguir entre los elementos de clics y arrastre del usuario.
Prensa largaUn largo gesto de prensa se refiere al funcionamiento del usuario que toca la pantalla con un dedo y la mantiene por un momento y lo levanta sin moverla. Durante la interacción larga de la prensa, el evento MSGesturehold se disparará varias veces para varios estados del gesto:
element.adDeventListener ("msgesturehold", manejando);
función handlehold (evt) {
if (evt.detail & evt.msgesture_flag_begin) {
// Comienzo señala el comienzo de un gesto. Para el gesto de retención, esto significa que el usuario ha estado manteniendo lo suficiente en su lugar para que el gesto se convierta en una prensa completa y sostenga si el dedo se levanta.
}
if (evt.detail & evt.msgesture_flag_end) {
// El final señala el final del gesto.
}
if (evt.detail & evt.msgesture_flag_cancel) {
// Cancelar señales que el usuario inició el gesto pero lo canceló. Para Hold, esto ocurre cuando el usuario se arrastra antes de levantar. Esta bandera se envía junto con la bandera final, lo que indica que el reconocimiento de gestos está completo.
}
}
Gestos dinámicos (contracción, rotación, deslizamiento y arrastre)
Los gestos dinámicos (por ejemplo, encogidos o girados) se informarán en forma de transformación, que es bastante similar a la transformación CSS 2D. Los gestos dinámicos pueden desencadenar tres eventos: MsgestureStart, MsgestUrechange (desencadenantes repetidos a medida que continúa el gesto) y Msgestureend. Cada evento contiene información sobre escala (contracción), rotación, conversión y velocidad.
Debido a que los gestos dinámicos se informan en las conversiones, será muy fácil usar MSGesture con conversiones 2D CSS para manipular elementos como fotos o rompecabezas. Por ejemplo, puede habilitar la escala, la rotación y el arrastre de elementos de las siguientes maneras:
TargetElement.AdDeventListener ("msgestUrechange", manipulate);
función manipuleLement (e) {
// Descopmento El siguiente código si desea deshabilitar la inercia incorporada proporcionada por el reconocimiento de gestos dinámicos
// if (E.Detail == E.Msgesture_Flag_inertia)
// devolver;
var m = nueva MSCSSMATRIX (e.target.style.transform); // Obtenga la última transformación de CSS en el elemento
e.target.style.transform = m
.Translate (E.offsetx, E.Offsety) // Mueve el origen de transformación bajo el centro del gesto
.Rotate (E.Rotation * 180 / Math.pi) // Aplicar rotación
.Scale (E.Scale) // Aplicar escala
.Translate (E.TranslationX, E.Translationy) // Aplicar traducción
.translate (-e.offsetx, -e.offsety); // Mueve el origen de transformación hacia atrás
}
Los gestos dinámicos, como el zoom y la rotación, pueden admitir operaciones del mouse, que se pueden lograr utilizando modificadores CTRL o Shift respectivamente mientras giran la rueda del mouse.