TouchEvent: touches プロパティ

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
touches

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Has more compatibility info.