Analyse d'événements JavaScript dans les compétences touch screens_javascript

Les exemples de cet article décrivent les événements JavaScript dans les écrans tactiles. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

1. Événement tactile

ontouchstart
ontouchmove
ontouchend
ontouchcancel Actuellement, tous les navigateurs mobiles prennent en charge ces quatre événements tactiles, y compris IE. Étant donné que les écrans tactiles prennent également en charge MouseEvent, leur ordre doit être noté : touchstart → mouseover → mousemove → mousedown → mouseup → click1

Les exemples sont les suivants :

/**
* onTouchEvent
*/
var div = document.getElementById("div");
//touchstart类似mousedown
div.ontouchstart = function(e){
//事件的touches属性是一个数组，其中一个元素代表同一时刻的一个触控点，
//从而可以通过touches获取多点触控的每个触控点
//由于我们只有一点触控，所以直接指向[0]
var touch = e.touches[0];
//获取当前触控点的坐标，等同于MouseEvent事件的clientX/clientY
var x = touch.clientX;
var y = touch.clientY;
};
//touchmove类似mousemove
div.ontouchmove = function(e){
//可为touchstart、touchmove事件加上preventDefault从而阻止触摸时，
//浏览器的缩放、滚动条滚动等
e.preventDefault();
};
//touchend类似mouseup
div.ontouchup = function(e){
//nothing to do
};

2. Événements gestuels Les gestes font référence à l'utilisation du multi-touch pour effectuer des opérations telles que la rotation et l'étirement, telles que l'agrandissement et la rotation d'images et de pages Web. Les événements gestuels sont déclenchés uniquement lorsque deux doigts ou plus se touchent en même temps. Une chose à laquelle nous devons prêter attention concernant la mise à l'échelle est les coordonnées de position de l'élément : nous utilisons généralement offsetX, getBoundingClientRect et d'autres méthodes pour obtenir les coordonnées de position de l'élément. Cependant, dans les navigateurs mobiles, la page est souvent mise à l'échelle pendant l'utilisation, et les coordonnées de l'élément mis à l'échelle changeront. La réponse est que cela varie. Utilisons un scénario pour illustrer ce problème : une fois la page A chargée, JavaScript obtient les coordonnées de l'élément dans le document sous la forme (100 100), puis l'utilisateur zoome sur la page. À ce stade, JavaScript est utilisé pour afficher le résultat. à nouveau les coordonnées de l'élément, qui sont toujours (100 100). Cependant, la zone réactive de l'élément sur l'écran sera décalée en fonction de la mise à l'échelle. Vous pouvez ouvrir la démo du jeu Brick Breaker, attendre que la page soit complètement chargée, puis zoomer. À ce stade, vous constaterez que même si votre doigt touche en dehors de la zone « Toucher ici », vous pouvez toujours contrôler le planche à billes car la zone est décalée. Le décalage persistera à moins que la page ne soit actualisée ou que la mise à l'échelle ne reprenne.

/**
* onGestureEvent
*/
var div = document.getElementById("div");
div.ongesturechange = function(e){
//scale代表手势产生的缩放比例，小于1是缩小，大于1是放大，原始为1
var scale = e.scale;
//rotation代表旋转手势的角度，值区间[0,360]，正值顺时针旋转，负值逆时针
var angle = e.rotation;
};

3. Détection de la gravité La détection de la gravité est relativement simple. Il vous suffit d'ajouter l'événement onorientationchange au nœud body. Dans ce cas, la valeur représentant l'orientation actuelle du téléphone mobile est obtenue à partir de la propriété window.orientation. La liste de valeurs de window.orientation est la suivante :

0 : Même sens que lors du premier chargement de la page
-90 : Rotation de 90° dans le sens des aiguilles d'une montre par rapport à la direction d'origine
180 : tourné à 180°
90 : Tourné à 90° dans le sens inverse des aiguilles d'une montre. D'après mes tests, Android 2.1 ne prend pas encore en charge la détection de gravité. Les événements ci-dessus sont les événements actuels sur écran tactile. Ces événements n'ont pas encore été intégrés dans la norme, mais ils sont déjà largement utilisés. J'ai Android 2.1 et je ne l'ai pas testé dans d'autres environnements.

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.