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 リストの長さを調べてアクティブになったタッチ点の数を決定し、タッチ点の数に応じて異なるハンドラーを呼び出しています。
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 |
ブラウザーの互換性
Loading…