Une brève discussion sur l'événement Touch des compétences javascript_javascript

Événement tactile js, généralement utilisé pour le glissement d'écran tactile sur les terminaux mobiles

Copier le code Le code est le suivant :

$(function(){document.addEventListener("touchmove ", _touch , false);}) function _touch(event){alert(1);}

touchstart : Déclenché lorsqu'un doigt touche l'écran ; il sera déclenché même s'il y a déjà un doigt sur l'écran.
touchmove : déclenché en continu lorsque le doigt glisse sur l'écran. Lors de cet événement, l'appel de PreventDefault() empêche le défilement.
touchend : déclenché lorsque le doigt est retiré de l'écran.
touchcancel : déclenché lorsque le système arrête de suivre les touches. L'événement déclencheur exact de cet événement n'est pas clair dans la documentation.

Les objets événement des événements ci-dessus ont tous les attributs suivants :

touches : un tableau d'objets Touch représentant les opérations tactiles actuellement suivies.
targetTouches : un tableau d'objets Touch spécifiques à la cible de l'événement.
changeTouches : un tableau d'objets Touch qui représente ce qui a changé depuis le dernier contact.

Chaque objet Touch contient les propriétés suivantes :

clientX : La coordonnée X de la cible tactile dans la fenêtre.
clientY : coordonnée Y de la cible tactile dans la fenêtre.
identifiant : représente l’identifiant unique du toucher.
pageX : la coordonnée x de la cible tactile dans la page.
pageY : la coordonnée y de la cible tactile dans la page.
screenX : La coordonnée x de la cible tactile sur l’écran.
screenY : La coordonnée y de la cible tactile sur l’écran.
cible : coordonnées du nœud DOM touché

Événement tactile

Trois événements tactiles de base répertoriés dans la spécification et largement mis en œuvre sur les appareils mobiles :
​ 1. touchstart : placez votre doigt sur un élément du DOM.
​ 2. touchmove : faites glisser un élément DOM avec votre doigt.
3. touchend : éloignez votre doigt d'un élément DOM.

Chaque événement tactile comprend trois listes tactiles :
​ 1. touches : une liste de tous les doigts actuellement sur l'écran.
​ 2. targetTouches : une liste de doigts situés sur l'élément DOM actuel.
3. changesTouches : une liste de doigts impliqués dans l'événement en cours

Par exemple, dans un événement touchend, ce serait le doigt retiré.

Ces listes sont constituées d'objets contenant des informations tactiles :
​ 1. identifiant : une valeur numérique qui identifie de manière unique le doigt actuel dans la session tactile.
​ 2. target : élément DOM, qui est la cible de l'action.
​ 3. Coordonnées client/page/écran : L'emplacement sur l'écran où l'action se produit.
​ 4. Coordonnées du rayon et rotationAngle : dessinez une ellipse à peu près équivalente à la forme d'un doigt.

Application tactile

Les événements touchstart, touchmove et touchend fournissent un ensemble suffisamment riche de fonctionnalités pour prendre en charge presque tous les types d'interactions tactiles, y compris les gestes multi-touch courants tels que pincer pour zoomer, faire pivoter et attendre. Le code suivant vous permet de faire glisser un élément DOM en utilisant un seul doigt :

 var obj = document.getElementByIdx_x_x_x_x_x_x('id');
 obj.addEventListener('touchmove', function(event) 
 { // 如果这个元素的位置内只有一个手指的话
    if (event.targetTouches.length == 1) 
 {
  var touch = event.targetTouches[0];
   // 把元素放在手指所在的位置
   obj.style.left = touch.pageX + 'px';
     obj.style.top = touch.pageY + 'px';
  }
}, false);

Ce qui suit est un exemple qui affiche tous les points tactiles actuels sur l'écran. Son but est de ressentir la réactivité de l'appareil.

   // 设置画布并通过ctx变量来暴露上下文复制代码
 canvas.addEventListener('touchmove',   
 function(event) {
    for (var i = 0; i < event.touches.length; i++) {
 var touch = event.touches;
  ctx.beginPath();
    ctx.arc(touch.pageX, touch.pageY, 20, 0, 2*Math.PI, true);
    ctx.fill();
    ctx.stroke();
   }
  }, false);

Démo

Il existe de nombreuses démos multi-touch intéressantes, comme cette démo de peinture sur toile de Paul Irish et d'autres.

Il existe également Browser Ninja, une démo technique qui est un clone de Fruit Ninja qui utilise des transitions, des transitions et des canevas CSS3.

Bonnes pratiques

Bloquer le zoom

Les paramètres multi-touch par défaut ne sont pas particulièrement faciles à utiliser car vos balayages et vos gestes sont souvent liés aux comportements du navigateur, tels que le défilement et le zoom.

Pour désactiver la mise à l'échelle, utilisez la balise méta suivante pour définir votre fenêtre d'affichage afin qu'elle ne soit pas évolutive pour l'utilisateur :
Content="width=device-width, initial-scale=1.0, user-scalable=no">
​ ​ Consultez cet article sur HTML 5 mobile pour en savoir plus sur les paramètres de la zone d'affichage.

Empêcher le défilement

Certains appareils mobiles ont un comportement de déplacement tactile par défaut, tel que l'effet de défilement excessif iOS classique, qui fait rebondir la vue lorsque le défilement dépasse les limites du contenu. Cette pratique crée de la confusion dans de nombreuses applications multi-touch, mais il est facile de la désactiver.

   document.body.addEventListener('touchmove', function(event) {
    event.preventDefault();
   }, false); 

细心渲染

如果你正在编写的多点触控应用涉及了复杂的多指手势的话，要小心地考虑如何响应触摸事件，因为一次要处理这么多的事情。考虑一下前面一节中的在屏幕上画出所有触点的例子，你可以在有触摸输入的时候就立刻进行绘制：

  canvas.addEventListener('touchmove', function(event) {
   renderTouches(event.touches);
  },

不过这一技术并不是要随着屏幕上的手指个数的增多而扩充，替代做法是，可以跟踪所有的手指，然后在一个循环中做渲染，这样可获得更好的性能：

  var touches = []
  canvas.addEventListener('touchmove', function(event) {
    touches = event.touches;
  }, false);
  // 设置一个每秒60帧的定时器
  timer = setInterval(function() {
   renderTouches(touches);
  }, 15);

     提示：setInterval不太适合于动画，因为它没有考虑到浏览器自己的渲染循环。现代的桌面浏览器提供了requestAnimationFrame这一函数，基于性能和电池工作时间原因，这是一个更好的选择。一但浏览器提供了对该函数的支持，那将是首选的处理事情的方式。

使用targetTouches和changedTouches
    要记住的一点是，event.touches是与屏幕接触的所有手指的一个数组，而不仅是位于目标DOM元素上的那些。你可能会发现使用 event.targetTouches和event.changedTouches来代替event.touches更有用一些。

    最后一点，因为你是在为移动设备做开发，因此你应该要留心移动的最佳做法，这些在Eric Bidelman的文章中有论及，以及要了解这一W3C文档。

设备支持     

    遗憾的是，触摸事件的实现在完备性和质量方面的差别很大。我编写了一个诊断脚本来显示一些关于触摸API实现的基本信息，其中包括哪些事件是支持的，以及 touchmove事件触发的解决方案。我在Nexus One和Nexus S硬件上测试了Android2.3.3，在Xoom上测试了Android 3.0.1，以及在iPad和iPhone上测试了iOS 4.2。

    简而言之，所有被测试的浏览器都支持touchstart、touchend和touchmove事件。

    规范提供了额外的三个触摸事件，但被测试的浏览器没有支持它们：
      1. touchenter：移动的手指进入一个DOM元素。
      2. toucheleave：移动手指离开一个DOM元素。
      3. touchcancel：触摸被中断（实现规范）。

     被测试的浏览器还在每个触摸列表内部都提供了touches、targetTouches和changedTouches列表。不过，被测试的浏览器没有支持radiusX、radiusY或是rotationAngle属性，这些属性指明触摸屏幕的手指的形状。在一次touchmove期间，事件大约一秒钟触发60次，所有的被测试设备都是这样。