Cet article décrit les événements JavaScript dans l'écran tactile. Partagez-le pour votre référence. L'analyse spécifique est la suivante:
1. Tacactié événements
aTouchstart
aTouchmove
aTouchend
Ontouchcancel prend actuellement en charge ces 4 événements Touch, y compris IE. Étant donné que les écrans tactiles soutiennent également Mouseevent, leur commande doit être notée: Touchstart → Mouseover → Mousemove → Mousedown → MouseUp → Click1
Les exemples sont les suivants:
/ *** ontouchEvent * / var div = document.getElementById ("div"); // touchstart est similaire à MousedownDiv.ontouchStart = fonction (e) {// L'attribut Touches de l'événement est un tableau, où un élément représente un point de contact au même moment, // donc vous pouvez obtenir chaque point de touche par rapport à des touches // depuis que nous avons un peu de toucher, nous e.touches [0]; // obtient les coordonnées du point de contact actuel, ce qui équivaut à clientx / clientvar x = touch.clientx; var y = touch.clienty;}; // TouchMove est similaire à MouseMoved.Antouchmove = fonction (e) {// Vous pouvez ajouter de la prévention pour tacler et tactile Scrolling, etc. E.PreventDefault ();}; // Touchend est similaire à MouseUpDiv.OntouchUp = fonction (e) {// rien à faire};2. Les gestes des événements de gestes se réfèrent à l'utilisation du multi-touch pour faire tourner, étirer et d'autres opérations, telles que l'élargissement et la rotation des images et des pages Web. Un événement de geste est déclenché lorsque deux doigts ou plus doivent toucher en même temps. Une chose à laquelle nous devons faire attention à l'échelle est les coordonnées de position des éléments: nous utilisons généralement Offsetx, GetBoundingClientRect et d'autres méthodes pour obtenir les coordonnées de position des éléments, mais dans les navigateurs mobiles, la page est souvent mise à l'échelle pendant l'utilisation, donc les coordonnées de l'élément à l'échelle changent-t-elle? La réponse est qu'il y a des différences. Utilisez un scénario pour illustrer ce problème: Une fois la page A est chargée, JavaScript obtient les coordonnées de l'élément dans le document AS (100,100), puis l'utilisateur élargit la page. À l'heure actuelle, JavaScript sortit à nouveau l'élément coordonne, et toujours (100 100), mais la zone de réponse de l'élément sur l'écran sera décalée en fonction du rapport de mise à l'échelle. Vous pouvez ouvrir la démonstration de jeu de brique, puis zoomer une fois la page complètement chargée. Pour le moment, vous constaterez que même si votre doigt touche à l'extérieur de la zone "Touche ici", vous pouvez contrôler la plaque de balle car la zone est décalée. Le décalage existera toujours à moins que la page soit actualisée ou que le zoom soit restauré.
/ *** ONEGTUREEVENT * / var div = document.getElementById ("div"); div.EnestuReChange = function (e) {// L'échelle représente l'échelle de mise à l'échelle générée par le geste. Moins de 1 se rétrécit et plus de 1 est l'élargissement. À l'origine, une échelle 1VAR = E.Scale; // Rotation représente l'angle du geste de rotation, intervalle de valeur [0,360], la valeur positive tourne dans le sens horaire, la valeur négative angle var dans le sens antihoraire = e.rotation;};3. La détection de gravité de la gravité est plus simple, il vous suffit d'ajouter un événement d'oorienationChange au nœud corporel. Dans cet événement, la valeur représentant la direction du téléphone actuelle est obtenue à partir de la propriété Window. La liste des valeurs de Window. orientation est la suivante:
0: cohérent avec la direction où la page a été chargée pour la première fois
-90: tourné dans le sens horaire de 90 ° par rapport à la direction d'origine
180: tourné à 180 °
90: tourné à 90 ° dans le sens antihoraire. Selon mes tests, Android 2.1 ne prend pas encore en charge la détection de gravité. Ce qui précède est les événements actuels de l'écran tactile. Ces événements n'ont pas été incorporés dans la norme, mais ont été largement utilisés. J'ai Android 2.1, non testé dans d'autres environnements.
PS: Ici, nous vous fournissons un outil en ligne sur les événements JS, qui résume les types d'événements couramment utilisés et les fonctions de fonction de JS:
Une liste complète des événements et fonctions JavaScript:
http://tools.vevb.com/table/javascript_event
J'espère que cet article sera utile à la programmation JavaScript de tous.