TouchEvent

コンストラクター

TouchEvent()

TouchEvent オブジェクトを生成します。

プロパティ

このインターフェイスは、親である UIEvent および Event からプロパティを継承しています。

TouchEvent.altKey 読取専用

タッチイベントが発生したときに alt キーが押下されていたかを示す論理値です。

TouchEvent.changedTouches 読取専用

TouchList で、前回のタッチイベントと今回との間に接触状態が変化したそれぞれの接触点を表すすべての Touch オブジェクトです。

TouchEvent.ctrlKey 読取専用

タッチイベントが発生したときに control キーが押下されていたかを示す論理値です。

TouchEvent.metaKey 読取専用

タッチイベントが発生したときに meta キーが押下されていたかを示す論理値です。

TouchEvent.shiftKey 読取専用

タッチイベントが発生したときに shift キーが押下されていたかを示す論理値です。

TouchEvent.targetTouches読取専用

現在タッチ面に接触している、かつイベントのターゲットと同じ要素でタッチを始めた Touch オブジェクトすべてで構成される TouchList です。

TouchEvent.touches 読取専用

TouchList で、対象や状態の変化にかかわらず、この面における現在のすべての接触点を表すすべての Touch オブジェクトが入ります。

TouchEvent.rotation 読取専用

イベントの開始以来の回転の変化 (角度) です。正の数は時計回りの回転です。負の数は逆時計回りの回転です。初期値は 0.0 です。

TouchEvent.scale 読取専用

イベントの開始以来の 2 本の指の間の距離です。イベントの開始時における最初の指の間の距離に対する浮動小数点の倍数で表現します。 1.0 より小さな値は内側へのピンチ (ズームアウト) です。 1.0 より大きな値は外側へのピンチ (ズームイン) です。初期値は 1.0 です。

タッチイベントの種類

タッチ関連の変化があったことを示すために発生するイベントは、数種類あります。イベントの TouchEvent.type プロパティを確認すると、何が発生したかを判断できます。

touchstart

ユーザーがタッチ面のタッチ点に触れたときに発生します。イベントのターゲットは、タッチが発生した場所の要素 (Element) です。

touchend

ユーザーがタッチ面からタッチ点を削除したとき (すなわち、指やスタイラスをタッチ面から離したとき) に発生します。これはタッチ点がタッチ面の端の外へ移動した場合にも発生します。例えば、ユーザーの指が画面の端よりも外に移動した場合です。

イベントのターゲットは、タッチ点が要素の外に移動した場合であっても、タッチ点に対応する touchstart イベントを受信したのと同じ要素 (Element) です。

タッチ面から削除されたタッチ点所 (複数の場合を含む) は、 changedTouches 属性で示される TouchList でわかります。

touchmove

ユーザがタッチ面でタッチ点を動かしたときに発生します。イベントのターゲットは、タッチ点が要素の外に移動した場合であっても、タッチ点に対応する touchstart イベントを受信したのと同じ要素 (Element) です。

このイベントはタッチ点の範囲、回転角、強さの属性が変化したときにも発生します。

メモ: touchmove イベントが発生する頻度はブラウザーごとに異なります。また、ユーザーのハードウェアの能力にも大きく依存するでしょう。特定のイベント粒度に依存してはいけません。

touchcancel

タッチ個所が何らかの方法で取り消されたときに発生します。このイベントが発生する理由はいくつか考えられます（正確な理由は端末ごと、およびブラウザーごとに異なるでしょう）。

• タッチを取り消す、ある種のイベントが発生した。これは、操作中にモーダルなアラートがポップアップした場合に発生するでしょう。
• タッチ個所がドキュメントウィンドウから外れて、ブラウザーの UI 領域、プラグイン、あるいは他の外部コンテンツに移動した。
• スクリーンがサポートする個数より多くのタッチ個所にユーザがタッチすると、TouchList の中でもっとも古い Touch が取り消される。

addEventListener() および preventDefault() の使用

重要なのは多くの場合、タッチイベントとマウスイベントの両方が送られることです (タッチに特化していないコードがユーザーと対話するため)。タッチイベントを使用する場合は、 preventDefault() を呼び出してマウスイベントが送信されないようにしてください。

Chrome のバージョン 56 以降 (デスクトップ版, Android 版 Chrome, Android WebView) は例外で、 passive オプションの touchstart および touchmove における既定値は true であり、 preventDefault() の呼び出しは効果がありません。この動作を変更するためには、passive オプションを false に設定します。そうすると preventDefault() が仕様書通りに動作します。リスナーを既定で passive と扱うことで、ユーザーがスクロール中にページのレンダリングがブロックされることを防いでいます。デモが Chrome Developer サイトにあります。

例

タッチイベントのメイン記事にある例をご覧ください。

仕様書

ブラウザーの互換性

関連情報

• タッチイベント
• GestureEvent