javascript_javascript スキルの Touch イベントに関する簡単な説明

js touch イベント。一般にモバイル端末のタッチ スクリーンのスライドに使用されます

touchstart: 指が画面に触れるとトリガーされ、すでに画面上に指がある場合でもトリガーされます。
touchmove: 指が画面上をスライドすると継続的にトリガーされます。このイベント中に、preventDefault() を呼び出すとスクロールが防止されます。
touchend: 指が画面から離れるとトリガーされます。
touchcancel: システムがタッチの追跡を停止したときに発生します。このイベントの正確なトリガーイベントはドキュメントでは明確ではありません。

上記のイベントのイベント オブジェクトはすべて次の属性を持ちます:

touches: 現在追跡されているタッチ操作を表す Touch オブジェクトの配列。
targetTouches: イベント ターゲットに固有の Touch オブジェクトの配列。
changeTouches: 最後のタッチ以降に何が変更されたかを表す Touch オブジェクトの配列。

各 Touch オブジェクトには次のプロパティが含まれます:

clientX: ビューポート内のタッチ ターゲットの X 座標。
clientY: ビューポート内のタッチ ターゲットの Y 座標。
識別子: タッチの一意の ID を表します。
pageX: ページ内のタッチ ターゲットの x 座標。
pageY: ページ内のタッチターゲットのy座標。
screenX: 画面上のタッチターゲットのx座標。
screenY: 画面上のタッチターゲットのy座標。
target: タッチされた DOM ノード座標

タッチイベント

仕様に記載されており、モバイル デバイス全体に広く実装されている 3 つの基本的なタッチ イベント:
1. touchstart: DOM 要素に指を置きます。
2. touchmove: DOM 要素を指でドラッグします。
3. touchend: DOM 要素から指を遠ざけます。

各タッチ イベントには 3 つのタッチ リストが含まれます:
1. タッチ: 現在画面上にあるすべての指のリスト。
2. targetTouches: 現在の DOM 要素上にある指のリスト。
3.ChangeTouches: 現在のイベントに関係する指のリスト

たとえば、タッチエンド イベントでは、これは削除された指になります。

これらのリストは、タッチ情報を含むオブジェクトで構成されます:
1. 識別子: タッチ セッション内の現在の指を一意に識別する数値。
2. target: アクションのターゲットである DOM 要素。
3. クライアント/ページ/画面座標: アクションが発生する画面上の位置。
4. 半径座標と回転角度: 指の形にほぼ等しい楕円を描きます。

タッチ対応アプリケーション

touchstart、touchmove、および touchend イベントは、ピンチしてズーム、回転、待機するなどの一般的なマルチタッチ ジェスチャを含む、ほぼすべてのタイプのタッチベースの操作をサポートするのに十分な豊富な機能セットを提供します。次のコードを使用すると、1 本指のタッチを使用して DOM 要素をドラッグできます:

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

以下は、画面上の現在のすべてのタッチ ポイントを表示する例です。その目的は、デバイスの応答性を感じることです。

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

デモ

Paul Irish らによるこのキャンバスベースのペイント デモのように、興味深いマルチタッチ デモがたくさんあります。

CSS3 トランジション、トランジション、キャンバスを使用する Fruit Ninja クローンである Browser Ninja の技術デモもあります。

ベストプラクティス

ブロックズーム

デフォルトのマルチタッチ設定は、スワイプやジェスチャーがスクロールやズームなどのブラウザーの動作に関連付けられていることが多いため、特に使いやすいわけではありません。

スケーリングを無効にするには、次のメタ タグを使用してビューポートを設定し、ユーザーがスケーリングできないようにします:
Content="width=デバイス幅、initial-scale=1.0、user-scalable=no">
表示領域設定の詳細については、モバイル HTML 5 に関するこの記事をご覧ください。

スクロールを防止します

一部のモバイル デバイスには、従来の iOS オーバースクロール効果などのデフォルトのタッチムーブ動作があり、スクロールがコンテンツの制限を超えるとビューがバウンスします。このやり方は多くのマルチタッチ アプリケーションで混乱を引き起こしますが、これを無効にするのは簡単です。

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