TouchEvent: touches プロパティ

touches は読み取り専用の TouchList で、現在タッチ面に接触しているタッチ点の Touch オブジェクトをすべて列挙します。タッチ点の変更の有無や、 touchstart 時点で対象としていた要素が何であったかは関係ありません。

何本の別個の指が画面に触れていると識別されるか、と考えればよいでしょう。

メモ: 配列内のタッチは必ずしも発生順（配列の i 番目の要素が発生した i 番目のタッチ）に並んでいるとは限りません。固有の順序を想定することはできません。タッチの発生順序を決定するには、 touch オブジェクト ID を使用してください。

値

TouchList で、現在タッチ面に接触しているタッチ点の Touch オブジェクトをすべて列挙します。タッチ点の変更の有無や、 touchstart 時点で対象としていた要素が何であったかは関係ありません。

例

この例では、 TouchEvent オブジェクトの TouchEvent.touches プロパティを説明しています。 TouchEvent.touches プロパティは TouchList オブジェクトであり、現在タッチ面に接触しているすべてのタッチ点の Touch オブジェクトのリストを格納しています。

以下のコードでは、 touchstart イベントハンドラーは TouchEvent.touches リストの長さを調べてアクティブになったタッチ点の数を決定し、タッチ点の数に応じて異なるハンドラーを呼び出しています。

js
someElement.addEventListener(
  "touchstart",
  (e) => {
    // タッチ点の数に応じて適切なハンドラーを呼び出す
    switch (e.touches.length) {
      case 1:
        handle_one_touch(e);
        break;
      case 2:
        handle_two_touches(e);
        break;
      case 3:
        handle_three_touches(e);
        break;
      default:
        console.log("未対応です");
        break;
    }
  },
  false,
);

仕様書

Specification
Touch Events
# dom-touchevent-touches

ブラウザーの互換性

BCD tables only load in the browser