TouchEvent: touches プロパティ
touches
は読み取り専用の TouchList
で、現在タッチ面に接触しているタッチ点の Touch
オブジェクトをすべて列挙します。タッチ点の変更の有無や、 touchstart
時点で対象としていた要素が何であったかは関係ありません。
何本の別個の指が画面に触れていると識別されるか、と考えればよいでしょう。
メモ:
配列内のタッチは必ずしも発生順(配列の i 番目の要素が発生した i 番目のタッチ)に並んでいるとは限りません。固有の順序を想定することはできません。タッチの発生順序を決定するには、 touch
オブジェクト ID を使用してください。
値
例
この例では、 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