Évolution de l'événement tactile HTML5 Tap Event introduction_html5 Compétences du didacticiel

Les événements tactiles sont des événements HTML5 uniques aux navigateurs mobiles. Bien que les événements de clic soient plus courants sur les PC et les terminaux mobiles, il y aura un délai de 300 ms sur le terminal mobile, ce qui affecte l'expérience utilisateur. et des appuis longs, car seul l'événement de clic ne sera pas déclenché tant que le temps d'attente par défaut ne sera pas écoulé pour garantir qu'aucune action ultérieure ne se produise. Ainsi, la réponse aux événements tactiles est plus rapide et l’expérience est meilleure.

Type d'événement tactile :

Afin de distinguer les changements d'état liés au toucher, il existe plusieurs types d'événements tactiles. Vous pouvez déterminer le type de l'événement en cours en examinant l'attribut <font face="NSimsun">TouchEvent.type</font> de l'événement tactile.

Remarque : Dans de nombreux cas, les événements tactiles et les événements de souris seront déclenchés en même temps (le but est de permettre au code qui n'est pas optimisé pour les appareils tactiles de continuer à fonctionner normalement au toucher appareils). Si vous utilisez des événements tactiles, vous pouvez appeler <font face="NSimsun">event.preventDefault()</font> pour empêcher le déclenchement des événements de souris.

Événements tactiles standards

Nom de l'événement

Description

Contient un tableau de touches

touchstart

Déclenché lorsque l'utilisateur place un point tactile sur la surface tactile. La cible de l'<font face="NSimsun">élément</font> de l'événement sera l'<font face="NSimsun">élément</font> cible à le code de localisation tactile>

Oui

touchmove

事件名称	描述	包含touches数组
touchstart	当用户在触摸平面上放置了一个触点时触发。事件的目标 <font face="NSimsun">element</font> 将是触点位置上的那个目标 <font face="NSimsun">element</font>	是
touchmove	当用户在触摸平面上移动触点时触发。 事件的目标 <font face="NSimsun">element</font> 和这个<font face="NSimsun"> touchmove </font>事件对应的 <font face="NSimsun">touchstart 事件的目标</font> <font face="NSimsun">element</font> 相同， 哪怕当 <font face="NSimsun">touchmove</font> 事件触发时，触点已经移出了该 <font face="NSimsun">element</font> 。	是
touchend	当一个触点被用户从触摸平面上移除（当用户将一个手指离开触摸平面）时触发。 当触点移出触摸平面的边界时也将触发。例如用户将手指划出屏幕边缘。 已经被从触摸平面上移除的触点，可以在 changedTouches 属性定义的 TouchList 中找到。	是
touchenter	当触点进入某个 <font face="NSimsun">element</font> 时触发。此事件没有冒泡过程。	是
touchleave	当触点离开某个 <font face="NSimsun">element</font> 时触发。此事件没有冒泡过程。	是
touchcancel	当触点由于某些原因被中断时触发。有几种可能的原因如下（具体的原因根据不同的设备和浏览器有所不同）： 由于某个事件取消了触摸：例如触摸过程被一个模态的弹出框打断。 触点离开了文档窗口，而进入了浏览器的界面元素、插件或者其他外部内容区域。 当用户产生的触点个数超过了设备支持的个数，从而导致 <font face="NSimsun">TouchList</font> 中最早的 <font face="NSimsun">Touch</font> 对象被取消。	是

Déclenché lorsque l'utilisateur déplace un point de contact sur la surface tactile. La cible de l'événement <font face="NSimsun">élément</font> correspond à ce <font face="NSimsun"> touchmove </font> événement La cible de l'<font face="NSimsun">événement touchstart</font> est la même que l'<font face="NSimsun">élément</font> code> , Même lorsque l'événement <font face="NSimsun">touchmove</font> est déclenché, le point de contact s'est déplacé hors de l'élément <font face="NSimsun"> </font>.

Oui

touchend

Déclenché lorsqu'un point tactile est retiré de la surface tactile par l'utilisateur (lorsque l'utilisateur lève un doigt de la surface tactile). Déclenché également lorsque le contact sort des limites du plan tactile. Par exemple, l’utilisateur retire son doigt du bord de l’écran. Les touches qui ont été supprimées du plan tactile peuvent être trouvées dans l'attribut changedTouches défini dans la TouchList .

Oui

touchenter

Déclenché lorsqu'un contact saisit un <font face="NSimsun">élément</font>. Cet événement n'a pas de processus bouillonnant.

Oui

touchleave

Déclenché lorsqu'un contact quitte un <font face="NSimsun">élément</font>. Cet événement n'a pas de processus bouillonnant.

Oui

toucherannuler

Déclenché lorsqu'un contact est interrompu pour une raison quelconque. Il existe plusieurs raisons possibles comme suit (les raisons spécifiques varient selon l'appareil et le navigateur) :

• Le contact a été annulé en raison d'un événement : par exemple, le processus tactile a été interrompu par une boîte de dialogue contextuelle modale.
• Le point de contact quitte la fenêtre du document et accède aux éléments de l'interface, aux plug-ins ou à d'autres zones de contenu externes du navigateur.
• Lorsque le nombre de points de contact générés par l'utilisateur dépasse le nombre pris en charge par l'appareil, ce qui entraîne la première <font face="NSimsun">TouchList</font> code>="NSimsun">L'objet Touch est annulé.

Oui

Propriétés de l'objet tactile

<font face="NSimsun">Touch.identifier</font>

Renvoie une valeur qui identifie de manière unique le point en contact avec le plan tactile. Cette valeur reste cohérente pour tous les événements déclenchés par ce doigt (ou stylet, etc.) jusqu'à ce qu'il quitte le plan tactile.

<font face="NSimsun">Touch.screenX</font>

La coordonnée X du point tactile par rapport au bord gauche de l'écran Propriété en lecture seule.

<font face="NSimsun">Touch.screenY</font>

La coordonnée Y du point de contact par rapport au bord supérieur de l'écran Propriété en lecture seule.

<font face="NSimsun">Touch.clientX</font>

La coordonnée X du point de contact par rapport au bord gauche de la fenêtre visible n'inclut aucun décalage de défilement Propriété en lecture seule.

<font face="NSimsun">Touch.clientY</font>

La coordonnée Y du point de contact par rapport au bord supérieur de la fenêtre visible n'inclut aucun décalage de défilement Propriété en lecture seule.

<font face="NSimsun">Touch.pageX</font>

La coordonnée X du point de contact par rapport au bord gauche du document HTML Lorsqu'il y a undéfilement horizontaloffset, Cette valeur contient le décalage de défilement horizontal</code.></font> <strong>Propriété en lecture seule.</strong> </td>. </tr> <tr> <td><code><font face="NSimsun">Touch.pageY</font>

La coordonnée Y du point de contact par rapport au bord supérieur du document HTML. <font face="NSimsun">Lorsqu'il y a un décalage de défilement horizontal, cette valeur inclut le décalage de défilement vertical</font>. . Attribut en lecture seule.

<font face="NSimsun">Touch.radiusX</font>

Le rayon de l'axe horizontal (axe X) de la plus petite ellipse pouvant entourer la surface de contact entre l'utilisateur et la surface tactile. L'unité de cette valeur est la même que celle du <font face="NSimsun">. screenX </font>Attribut en lecture seule.

<code><font face="NSimsun">Touch.force</font>

La quantité de pression exercée par le doigt sur la surface tactile, un nombre à virgule flottante compris entre 0,0 (aucune pression) et 1,0 (pression maximale). Propriété en lecture seule.

<code><font face="NSimsun">Touch.radiusY</font>

Le rayon de l'axe vertical (axe Y) de la plus petite ellipse pouvant entourer la surface de contact entre l'utilisateur et la surface tactile. L'unité de cette valeur est la même que celle du <font face="NSimsun">. screenY </font>Attribut en lecture seule.

<code><code><font face="NSimsun">Touch.target</font>

<font face="NSimsun">Touch.identifier</font>	返回一个可以唯一地识别和触摸平面接触的点的值. 这个值在这根手指（或触摸笔等）所引发的所有事件中保持一致, 直到它离开触摸平面.
<font face="NSimsun">Touch.screenX</font>	触点相对于屏幕左边沿的的X坐标. 只读属性.
<font face="NSimsun">Touch.screenY</font>	触点相对于屏幕上边沿的的Y坐标. 只读属性.
<font face="NSimsun">Touch.clientX</font>	触点相对于可见视区左边沿的的X坐标. 不包括任何滚动偏移. 只读属性.
<font face="NSimsun">Touch.clientY</font>	触点相对于可见视区上边沿的的Y坐标. 不包括任何滚动偏移. 只读属性.
<font face="NSimsun">Touch.pageX</font>	触点相对于HTML文档左边沿的的X坐标. 当存在水平滚动的偏移时, 这个值包含了水平滚动的偏移. 只读属性.
<font face="NSimsun">Touch.pageY</font>	触点相对于HTML文档上边沿的的Y坐标. <font face="NSimsun">当存在水平滚动的偏移时, 这个值包含了垂直滚动的偏移</font>. 只读属性.
<font face="NSimsun">Touch.radiusX</font>	能够包围用户和触摸平面的接触面的最小椭圆的水平轴(X轴)半径. 这个值的单位和<font face="NSimsun"> screenX 相同. </font>只读属性.
<code><font face="NSimsun">Touch.force</font>	手指挤压触摸平面的压力大小, 从0.0(没有压力)到1.0(最大压力)的浮点数. 只读属性.
<code><font face="NSimsun">Touch.radiusY</font>	能够包围用户和触摸平面的接触面的最小椭圆的垂直轴(Y轴)半径. 这个值的单位和<font face="NSimsun"> screenY 相同. </font>只读属性.
<code><code><font face="NSimsun">Touch.target</font>	当这个触点最开始被跟踪时(在 <font face="NSimsun">touchstart</font> 事件中), 触点位于的HTML元素. 哪怕在触点移动过程中, 触点的位置已经离开了这个元素的有效交互区域, 或者这个元素已经被从文档中移除. 需要注意的是, 如果这个元素在触摸过程中被移除, 这个事件仍然会指向它, 但是不会再冒泡这个事件到 <font face="NSimsun">window</font> 或 <font face="NSimsun">document</font> 对象. 因此, 如果有元素在触摸过程中可能被移除, 最佳实践是将触摸事件的监听器绑定到这个元素本身, 防止元素被移除后, 无法再从它的上一级元素上侦测到从该元素冒泡的事件. 只读属性.

Lorsque ce point de contact est initialement suivi (dans l'événement <font face="NSimsun">touchstart</font>), le point de contact est situé dans l'élément HTML même s'il est tactile. le point se déplace Au cours du processus, la position du point de contact a quitté la zone d'interaction effective de cet élément,

Ou cet élément a été supprimé du document. Il est à noter que si cet élément est supprimé lors du processus tactile, cet événement pointera toujours vers lui, mais cet événement ne remontera plus jusqu'à la police fenêtre ou objet <font face="NSimsun">document</font>.

Par conséquent, s'il existe un élément qui peut être supprimé pendant le processus tactile, la meilleure pratique consiste à lier l'écouteur d'événement tactile à l'élément lui-même pour empêcher l'élément d'être supprimé de son élément parent. Un événement a été détecté en train de bouillonner. à partir de cet élément. Attribut en lecture seule.

IE指针事件

事件名称	描述（在触摸设备上）
MSPointerDown	触摸开始
MSPointerMove	接触点移动
MSPointerUp	触摸结束
MSPointerOver	触摸点移动到元素内，相当于mouseover
MSPointerOut	触摸点离开元素，相当于mouseout

Événements tactiles dans IE10

Propriété MSPointerEvent

属性	描述
hwTimestamp	创建事件的时间（ms）
isPrimary	标识该指针是不是主指针
pointerId	指针的唯一ID（类似于触摸事件的标识符）
pointerType	一个整数，标识了该事件来自鼠标、手写笔还是手指
pressure	笔的压力，0-255，只有手写笔输入时才可用
rotation	0-359的整数，光标的旋转度（如果支持的话）
tiltX/tiltY	手写笔的倾斜度，只有用手写笔输入时才支持

Événements équivalents

鼠标	触摸	键盘
mousedown	touchstart	keydown
mousemove	touchmove	keydown
mouseup	touchend	keyup
mouseover		focus

Évidemment, la séquence d'action tactile : touchstart-touchmove-touchend et la séquence de la souris : mousedown-mousemove-mouseup et la séquence du clavier : keydown-keypress-keyup sont très similaires. Ce n'est pas une coïncidence, car les trois modèles d'interaction. peut être décrit pour start-move-stop.

Cela dit, cliquer doit passer par le processus touchstart-touchmove-touchend, avec un délai de 300 ms, donc un événement tap est nécessaire. Tap signifie toucher le même point pendant une courte période.

Événements Tap et LongTap encapsulés

Code XML/HTMLCopier le contenu dans le presse-papiers

1. (function() {    
2.     var TOUCHSTART, TOUCHEND ;    
3.     if (typeof(window.ontouchstart) != 'undefined') {    
4.         TOUCHSTART = 'touchstart';    
5.         TOUCHEND = 'touchend';    
6.         TOUCHMOVE='touchmove';    
7.      
8.     } else if (typeof(window.onmspointerdown) != 'undefined') {    
9.         TOUCHSTART = 'MSPointerDown';    
10.         TOUCHEND = 'MSPointerUp';    
11.         TOUCHMOVE='MSPointerMove';    
12.     } autre {    
13.         TOUCHSTART = 'mousedown';    
14.         TOUCHEND = 'mouseup';    
15.         TOUCHMOVE = 'mousemove';    
16.     }    
17.     fonction NodeTouch(nœud) {    
18.         this._node = node;    
19.     }    
20.     fonction tap (nœud, rappel, portée) {    
21.         node.addEventListener(TOUCHSTART, function(e) {    
22.             x = e.touches[0].pageX;    
23.             y = e.touches[0].pageY;    
24.         });    
25.         node.addEventListener(TOUCHEND, function(e) {    
26.             e.stopPropagation();    
27.             e.preventDefault();    
28.             var curx = e.changedTouches[0].pageX;    
29.             var cury = e.changedTouches[0].pageY;    
30.             si (Math.abs(curx - x) < 6 && Math.abs(cury - y) < 6) {    
31.                 callback.apply(portée, arguments);    
32.             }    
33.         });    
34.     }    
35.     fonction longTap (nœud, rappel, portée) {    
36.         var x,y,startTime=0,endTime=0,in_dis=false;    
37.         node.addEventListener(TOUCHSTART, function(e) {    
38.             x = e.touches[0].pageX;    
39.             y = e.touches[0].pageY;    
40.             startTime=(new Date()).getTime();    
41.         });    
42.         node.addEventListener(TOUCHEND, function(e) {    
43.             e.stopPropagation();    
44.             e.preventDefault();    
45.             var curx = e.changedTouches[0].pageX;    
46.             var cury = e.changedTouches[0].pageY;    
47.             si (Math.abs(curx - x) < 6 && Math.abs(cury - y) < 6) {    
48.                 in_dis=true;    
49.             }autre{    
50.                 in_dis=false;    
51.             }    
52.             endTime=(new Date()).getTime();    
53.             if (endTime - startTime > 300 && in_dis) {    
54.                 callback.apply(portée, arguments);    
55.             }    
56.         });    
57.     }    
58.     NodeTouch.prototype.on = fonction(evt, callback, scope) {    
59.         var scopeObj;    
60.         var x,y;    
61.         si (!scope) {    
62.             scopeObj = this._node;    
63.         } autre {    
64.             scopescopeObj = scope;    
65.         }    
66.         si (evt === 'appuyez') {    
67.             tap(this._node,callback,scope);    
68.         } else if(evt === 'appui long'){    
69.             longTap(this._node,callback,scope);    
70.         } autre {    
71.             this._node.addEventListener(evt, function() {    
72.                 callback.apply(portée, arguments);    
73.              });    
74.         }    
75.         rendez-ce ;    
76.     }    
77.     window.$ = function(sélecteur) {    
78.         var node = document.querySelector(sélecteur);    
79.         si (nœud) {    
80.             return new NodeTouch(node);    
81.         } autre {    
82.             return null ;    
83.         }    
84.     }    
85. })();    
86. var boîte=$("#box");    
87. box.on("longtap",function(){    
88.     console.log("你已经长按了");    
89. },boîte)  

以上这篇HTML5触摸事件演化tap事件介绍就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

原文地址：http://www.cnblogs.com/hutuzhu/archive/2016/03/25/5315638.html