Événements tactiles dans le développement web mobile (tutoriel détaillé)-js tutoriel-php.cn

Ci-dessous, je partagerai avec vous une explication détaillée d'exemples d'événements tactiles dans le développement Web mobile. Elle a une bonne valeur de référence et j'espère qu'elle sera utile à tout le monde.

Mots précédents

Afin de transmettre des informations spéciales aux développeurs, Safari pour iOS a ajouté de nouveaux événements exclusifs. Étant donné que les appareils iOS ne disposent ni de souris ni de clavier, les événements de souris et de clavier classiques ne suffisent tout simplement pas lors du développement de pages Web interactives pour Safari mobile. Avec l'ajout de WebKit dans Android, bon nombre de ces événements propriétaires sont devenus des standards de facto, ce qui a conduit le W3C à commencer à développer la spécification Touch Events. Cet article présentera en détail l'événement tactile mobile

Vue d'ensemble

Lorsque l'iPhone 3G contenant le logiciel iOS 2.0 est sorti, il incluait également une nouvelle version du navigateur Safari. . Ce nouveau Safari mobile propose de nouveaux événements liés aux opérations tactiles. Plus tard, les navigateurs sur Android ont implémenté le même événement. Les événements tactiles sont déclenchés lorsque l'utilisateur place son doigt sur l'écran, le fait glisser sur l'écran ou l'éloigne de l'écran. Plus précisément, il existe les événements tactiles suivants

touchstart:当手指触摸屏幕时触发；即使已经有一个手指放在了屏幕上也会触发
touchmove:当手指在屏幕上滑动时连续地触发。在这个事件发生期间，调用preventDefault()可以阻止滚动
touchend:当手指从屏幕上移开时触发
touchcancel:当系统停止跟踪触摸时触发(不常用)。关于此事件的确切触发时间，文档中没有明确说明

Copier après la connexion

[touchenter et touchleave]

Les spécifications des événements tactiles incluaient autrefois les événements touchenter et touchleave. Ces deux événements se produisent lorsque le doigt de l'utilisateur se déplace vers ou. Lancé lorsqu'un élément est supprimé. Mais ces deux événements ne se sont jamais réalisés. Microsoft propose des événements alternatifs pour ces deux événements, mais seul IE les prend en charge. Dans certains cas, il est très utile de savoir si le doigt de l'utilisateur glisse dans et hors d'un élément, j'espère donc que ces deux événements pourront revenir à la norme

Dans les événements tactiles, ceux couramment utilisés sont touchstart, touchumove et Les trois événements de touchend correspondent aux événements de la souris comme suit

鼠标   触摸   
mousedown touchstart 
mousemove touchmove 
mouseup  touchend

Copier après la connexion

[Note] Certaines versions de l'événement tactile sous le simulateur Chrome utilisent le gestionnaire d'événements de niveau DOM0 pour ajouter des événements non valides

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style>
 #test{height:200px;width:200px;background:lightblue;}
 </style>
</head>
<body>
<p id="test"></p>
<script>
 (function(){ 
 var 
  stateMap = {
  touchstart_index : 0,
  touchmove_index : 0,
  touchend_index : 0
  },
  elesMap = {
  touch_obj: document.getElementById(&#39;test&#39;)
  },
  showIndex, handleTouch;
 showIndex = function ( type ) {
  elesMap.touch_obj.innerHTML = type + &#39;:&#39; + (++stateMap[type + &#39;_index&#39;]);
 };
 handleTouch = function ( event ) {
  showIndex( event.type );
 };
 elesMap.touch_obj.addEventListener(&#39;touchstart&#39;, function(event){handleTouch(event);}); 
 elesMap.touch_obj.addEventListener(&#39;touchmove&#39;, function(event){handleTouch(event);});
 elesMap.touch_obj.addEventListener(&#39;touchend&#39;, function(event){handleTouch(event);});
 })(); 
</script>
</body>
</html>

Copier après la connexion

300 ms

Le problème des 300 ms fait référence à un intervalle de 300 ms entre un élément remplissant sa fonction et l'exécution d'un événement tactile. Par rapport aux événements tactiles, les événements de souris, les événements de focus, les comportements par défaut du navigateur, etc. ont tous un délai de 300 ms

【Cliquez via】

En raison de l'existence de 300 ms, cela provoquera des problèmes courants cliquez sur la question. Regardons d'abord l'exemple

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style>
  #test {position: absolute;top: 0;left: 0;opacity: 0.5;height: 200px;width: 200px;background: lightblue;}
 </style>
</head>
<body>
 <a href="https://baidu.com">百度</a>
 <p id="test"></p>
 <script>
  (function () {
   var
    elesMap = {
     touchObj: document.getElementById(&#39;test&#39;)
    },
    fnHide, onTouch;
   fnHide = function (type) {
    elesMap.touchObj.style.display = &#39;none&#39;;
   };
   onTouch = function (event) {
    fnHide();
   };
   elesMap.touchObj.addEventListener(&#39;touchstart&#39;, function(event){onTouch(event);});
  })(); 
 </script>
</body>
</html>

Copier après la connexion

Après avoir cliqué sur le p translucide bleu clair (déclenchant l'événement tactile), si la position du clic est juste au-dessus du lien, le comportement par défaut du saut de lien sera déclenché. L'explication détaillée est qu'après avoir cliqué sur la page, le navigateur enregistrera les coordonnées de la page cliquée, et 300 ms plus tard, l'élément sera retrouvé à ces coordonnées. Déclenchez le comportement du clic sur cet élément. Par conséquent, si l’élément supérieur de la même coordonnée de page disparaît dans les 300 ms, un comportement de clic sera déclenché sur l’élément inférieur 300 ms plus tard. Cela provoque un problème de clic

Ce problème se produit car le comportement de toucher l'écran est surchargé. Au moment où un doigt touche l'écran, le navigateur ne peut pas prédire si l'utilisateur appuie, double-clique, glisse, maintient ou toute autre opération. La seule chose sûre à faire est d'attendre un peu et de voir ce qui se passe ensuite

Le problème est le double-tap. Même si le navigateur détecte que le doigt a été retiré de l'écran, il n'a toujours aucun moyen de savoir quoi faire ensuite. Parce que le navigateur n'a aucun moyen de savoir si le doigt reviendra à l'écran ou s'il finira par déclencher l'événement Tap et la cascade d'événements. Pour le déterminer, le navigateur doit attendre un court laps de temps. Les développeurs de navigateurs ont trouvé un intervalle de temps optimal, qui est de 300 millisecondes

[Solution]

1 Ajoutez un délai de 300 ms dans le gestionnaire d'événement de l'événement tactile

(function () {
   var
    elesMap = {
     touchObj: document.getElementById(&#39;test&#39;)
    },
    fnHide, onTouch;
   fnHide = function (type) {
    elesMap.touchObj.style.display = &#39;none&#39;;
   };
   onTouch = function (event) {
    setTimeout(function(){
     fnHide();
    },300);
   };
   elesMap.touchObj.addEventListener(&#39;touchstart&#39;, function (event) { onTouch(event); });
  })();

Copier après la connexion

. 2. Utilisez l'animation d'assouplissement et ajoutez un effet de transition de 300 ms. Notez que l'attribut d'affichage ne peut pas utiliser la transition

3 Ajoutez l'élément dom dans la couche intermédiaire pour permettre à la couche intermédiaire d'accepter l'événement de pénétration et de le masquer plus tard. 🎜>

4. Les niveaux supérieur et inférieur utilisent des événements tap, mais le comportement par défaut est inévitable

5 L'événement touchstart sur le document empêche le comportement par défaut.

document.addEventListener(&#39;touchstart&#39;,function(e){
  e.preventDefault();
})

Copier après la connexion

Ensuite, ajoutez le comportement de saut de la balise a

a.addEventListener(&#39;touchstart&#39;,function(){
 window.location.href = &#39;https://cnblogs.com&#39;; 
})

Copier après la connexion

Cependant, cette méthode a des effets secondaires, rendant la page incapable de défiler, le texte impossible d'être sélectionné, etc. . Si vous devez restaurer le comportement de sélection de texte sur un élément, vous pouvez utiliser empêcher le bouillonnement pour restaurer l'objet événement

el.addEventListener(&#39;touchstart&#39;,function(e){
  e.stopPropagation();
})

Copier après la connexion

[Informations de base]

L'objet événement de chaque événement tactile fournit des attributs communs dans les événements de souris, notamment le type d'événement, l'objet cible de l'événement, le bouillonnement d'événement, le flux d'événements, le comportement par défaut, etc.

Prendre touchstart à titre d'exemple, l'exemple de code est le suivant

<script>
  (function () {
   var
    elesMap = {
     touchObj: document.getElementById(&#39;test&#39;)
    },
    onTouch;
   onTouch = function (e) {
     console.log(e)
  };
   elesMap.touchObj.addEventListener(&#39;touchstart&#39;, function (event) { onTouch(event); });
  })(); 
 </script>

Copier après la connexion

1 L'attribut currentTarget renvoie le nœud lié à la fonction d'écoute exécutée par l'événement

2. la valeur réelle de l'événement Target node

3. L'attribut srcElement a la même fonction que l'attribut target

//当前目标
currentTarget:[object HTMLpElement]
//实际目标
target:[object HTMLpElement]
//实际目标
srcElement:[object HTMLpElement]

Copier après la connexion

4. L'attribut eventPhase renvoie une valeur entière, indiquant le flux de l'événement. scène dans laquelle se situe actuellement l’événement. 0 signifie que l'événement ne s'est pas produit, 1 signifie l'étape de capture, 2 signifie l'étape cible, 3 signifie l'étape de bouillonnement

5. L'attribut bubbles renvoie une valeur booléenne, indiquant si l'événement en cours fera des bulles. Cet attribut est un attribut en lecture seule

6. L'attribut annulable renvoie une valeur booléenne indiquant si l'événement peut être annulé. Cet attribut est un attribut en lecture seule

//事件流
eventPhase: 2
//可冒泡
bubbles: true
//默认事件可取消
cancelable: true

Copier après la connexion

[touchList]

除了常见的DOM属性外，触摸事件对象有一个touchList数组属性，其中包含了每个触摸点的信息。如果用户使用四个手指触摸屏幕，这个数组就会有四个元素。一共有三个这样的数组

1、touches：当前触摸屏幕的触摸点数组（至少有一个触摸在事件目标元素上）

2、changedTouches ：导致触摸事件被触发的触摸点数组

3、targetTouches：事件目标元素上的触摸点数组

如果用户最后一个手指离开屏幕触发touchend事件，这最后一个触摸点信息不会出现在targetTouches和touches数组中，但是会出现在changedTouched数组中。因为是它的离开触发了touchend事件，所以changedTouches数组中仍然包含它。上面三个数组中，最常用的是changedTouches数组

(function () {
   var
    elesMap = {
     touchObj: document.getElementById(&#39;test&#39;)
    },
    onTouch;
   onTouch = function (e) {
     elesMap.touchObj.innerHTML = &#39;touches:&#39; + e.touches.length
                  + &#39;<br>changedTouches:&#39; + e.changedTouches.length
                  + &#39;<br>targetTouches:&#39; + e.targetTouches.length;
   };
   elesMap.touchObj.addEventListener(&#39;touchstart&#39;, function (event) { onTouch(event); });
  })();

Copier après la connexion

【事件坐标】

上面这些触摸点数组中的元素可以像普通数组那样用数字索引。数组中的元素包含了触摸点的有用信息，尤其是坐标信息。每个Touch对象包含下列属性

clientx:触摸目标在视口中的x坐标
clientY:触摸目标在视口中的y坐标
identifier:标识触摸的唯一ID
pageX:触摸目标在页面中的x坐标（包含滚动）
pageY:触摸目标在页面中的y坐标（包含滚动）
screenX:触摸目标在屏幕中的x坐标
screenY:触摸目标在屏幕中的y坐标
target:触摸的DOM节点目标

Copier après la connexion

changedTouches数组中的第一个元素就是导致事件触发的那个触摸点对象(通常这个触摸点数组不包含其他对象)。这个触摸点对象含有clientX/Y和pageX/Y坐标信息。除此之外还有screenX/Y和x/y，这些坐标在浏览器间不太一致，不建议使用

clientX/Y和pageX/Y的区别在于前者相对于视觉视口的左上角，后者相对于布局视口的左上角。布局视口是可以滚动的

(function () {
   var
    elesMap = {
     touchObj: document.getElementById(&#39;test&#39;)
    },
    onTouch;
   onTouch = function (e) {
    var touch = e.changedTouches[0];
    elesMap.touchObj.innerHTML = &#39;clientX:&#39; + touch.clientX + &#39;<br>clientY:&#39; + touch.clientY
     + &#39;<br>pageX:&#39; + touch.pageX + &#39;<br>pageY:&#39; + touch.pageY
     + &#39;<br>screenX:&#39; + touch.screenX + &#39;<br>screenY:&#39; + touch.screenY
   };
   elesMap.touchObj.addEventListener(&#39;touchstart&#39;, function (event) { onTouch(event); });
  })();

Copier après la connexion

上面是我整理给大家的，希望今后会对大家有帮助。

在angularjs中使用$http实现异步上传Excel文件方法

通过vuejs如何实现数据驱动视图原理

在Vue中如何使用父组件调用子组件事件

在vue中如何实现密码显示隐藏切换功能

在vue.js中详细解读this.$emit的使用方法

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!