Eine kurze Diskussion zum Touch-Event von javascript_javascript skills-js-Tutorial-php.cn

js Touch-Ereignis, das im Allgemeinen für das Schieben des Touchscreens auf mobilen Endgeräten verwendet wird

Code kopieren Der Code lautet wie folgt:

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

Touchstart: Wird ausgelöst, wenn ein Finger den Bildschirm berührt; es wird auch dann ausgelöst, wenn sich bereits ein Finger auf dem Bildschirm befindet.
touchmove: Wird kontinuierlich ausgelöst, wenn der Finger über den Bildschirm gleitet. Während dieses Ereignisses verhindert der Aufruf von „preventDefault()“ das Scrollen.
touchend: Wird ausgelöst, wenn der Finger vom Bildschirm entfernt wird.
touchcancel: Wird ausgelöst, wenn das System die Verfolgung von Berührungen stoppt. Das genaue auslösende Ereignis für dieses Ereignis ist aus der Dokumentation nicht ersichtlich.

Die Ereignisobjekte der oben genannten Ereignisse haben alle die folgenden Attribute:

Berührungen: Ein Array von Touch-Objekten, die die aktuell verfolgten Berührungsvorgänge darstellen.
targetTouches: Ein Array von Touch-Objekten, die für das Ereignisziel spezifisch sind.
changeTouches: Ein Array von Touch-Objekten, das darstellt, was sich seit der letzten Berührung geändert hat.

Jedes Touch-Objekt enthält die folgenden Eigenschaften:

clientX: Die X-Koordinate des Touch-Ziels im Ansichtsfenster.
clientY: Y-Koordinate des Touch-Ziels im Ansichtsfenster.
Bezeichner: Stellt die eindeutige ID der Berührung dar.
pageX: Die x-Koordinate des Berührungsziels auf der Seite.
pageY: Die Y-Koordinate des Berührungsziels auf der Seite.
screenX: Die x-Koordinate des Berührungsziels auf dem Bildschirm.
screenY: Die y-Koordinate des Berührungsziels auf dem Bildschirm.
Ziel: Berührte DOM-Knotenkoordinaten

Touch-Ereignis

Drei grundlegende Berührungsereignisse, die in der Spezifikation aufgeführt und auf Mobilgeräten weit verbreitet sind:
1. Touchstart: Legen Sie Ihren Finger auf ein DOM-Element.
2. touchmove: Ziehen Sie ein DOM-Element mit Ihrem Finger.
3. touchend: Bewegen Sie Ihren Finger von einem DOM-Element weg.

Jedes Berührungsereignis enthält drei Berührungslisten:
1. Berührungen: eine Liste aller Finger, die sich derzeit auf dem Bildschirm befinden.
2. targetTouches: eine Liste der Finger, die sich auf dem aktuellen DOM-Element befinden.
3. changesTouches: eine Liste der am aktuellen Ereignis beteiligten Finger

Bei einem Touchend-Ereignis wäre dies beispielsweise der entfernte Finger.

Diese Listen bestehen aus Objekten, die Berührungsinformationen enthalten:
1. Bezeichner: ein numerischer Wert, der den aktuellen Finger in der Touch-Sitzung eindeutig identifiziert.
2. Ziel: DOM-Element, das das Ziel der Aktion ist.
3. Client-/Seiten-/Bildschirmkoordinaten: Die Stelle auf dem Bildschirm, an der die Aktion stattfindet.
4. Radiuskoordinaten und Rotationswinkel: Zeichnen Sie eine Ellipse, die ungefähr der Form eines Fingers entspricht.

Touch-fähige Anwendung

Die Ereignisse „touchstart“, „touchmove“ und „touchend“ bieten ausreichend umfangreiche Funktionen, um nahezu jede Art von berührungsbasierter Interaktion zu unterstützen – einschließlich gängiger Multi-Touch-Gesten wie Auf- und Zuziehen zum Zoomen, Drehen und Warten. Mit dem folgenden Code können Sie ein DOM-Element per Ein-Finger-Berührung verschieben:

 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);

Nach dem Login kopieren

Das Folgende ist ein Beispiel, das alle aktuellen Berührungspunkte auf dem Bildschirm anzeigt. Der Zweck besteht darin, die Reaktionsfähigkeit des Geräts zu spüren.

   // 设置画布并通过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);

Nach dem Login kopieren

Demo

Es gibt viele interessante Multi-Touch-Demos, wie diese Leinwand-Maldemo von Paul Irish und anderen.

Es gibt auch Browser Ninja, eine Tech-Demo, bei der es sich um einen Fruit Ninja-Klon handelt, der CSS3-Übergänge, Übergänge und Canvases verwendet.

Best Practices

Zoom blockieren

Die standardmäßigen Multi-Touch-Einstellungen sind nicht besonders einfach zu verwenden, da Ihre Wischbewegungen und Gesten häufig an Browserverhalten wie Scrollen und Zoomen gebunden sind.

Um die Skalierung zu deaktivieren, verwenden Sie das folgende Meta-Tag, um Ihr Ansichtsfenster so einzustellen, dass es für den Benutzer nicht skalierbar ist:
Content="width=device-width, initial-scale=1.0, user-scalable=no">
Sehen Sie sich diesen Artikel über mobiles HTML 5 an, um mehr über die Einstellungen des Ansichtsbereichs zu erfahren.

Scrollen verhindern

Einige Mobilgeräte verfügen über ein standardmäßiges Touchmove-Verhalten, z. B. den klassischen iOS-Overscroll-Effekt, der dazu führt, dass die Ansicht springt, wenn das Scrollen die Grenzen des Inhalts überschreitet. Diese Vorgehensweise führt bei vielen Multi-Touch-Anwendungen zu Verwirrung, lässt sich aber leicht deaktivieren.

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

Nach dem Login kopieren

细心渲染

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

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

提示：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次，所有的被测试设备都是这样。