TouchEvent

TouchEvent インターフェイスは、タッチ感応面への接触状態が変化したときに発生する UIEvent を表します。この面は、例えばタッチ画面やトラックパッドです。このイベントは画面との 1 か所以上の接触を表すことが可能であり、また接触個所の移動、増加、減少などに対応することができます。

タッチは Touch オブジェクトで表されます。それぞれのタッチで位置、大きさと形状、圧力の量、対象要素を示します。タッチのリストは TouchList オブジェクトで表されます。

コンストラクター

TouchEvent() (en-US)
TouchEvent オブジェクトを生成します。

プロパティ

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

TouchEvent.altKey (en-US) 読取専用
タッチイベントが発生したときに alt キーが押下されていたかを示す論理値です。
TouchEvent.changedTouches (en-US) 読取専用
TouchList で、前回のタッチイベントと今回との間に接触状態が変化したそれぞれの接触点を表すすべての Touch オブジェクトです。
TouchEvent.ctrlKey (en-US) 読取専用
タッチイベントが発生したときに control キーが押下されていたかを示す論理値です。
TouchEvent.metaKey (en-US) 読取専用
タッチイベントが発生したときに meta キーが押下されていたかを示す論理値です。
TouchEvent.shiftKey (en-US) 読取専用
タッチイベントが発生したときに shift キーが押下されていたかを示す論理値です。
TouchEvent.targetTouches (en-US)読取専用
現在タッチ面に接触している、かつイベントのターゲットと同じ要素でタッチを始めた Touch オブジェクトすべてで構成される TouchList です。
TouchEvent.touches (en-US) 読取専用
TouchList で、対象や状態の変化にかかわらず、この面における現在のすべての接触点を表すすべての Touch オブジェクトが入ります。
TouchEvent.rotation この API は標準化されていません。 読取専用
イベントの開始以来の回転の変化 (角度) です。正の数は時計回りの回転です。負の数は逆時計回りの回転です。初期値は 0.0 です。
TouchEvent.scale この API は標準化されていません。 読取専用
イベントの開始以来の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() の呼び出しは効果がありません。この動作を変更するためには、下記の例にあるように preventDefault() の呼び出しの後で passive オプションを false に設定すると、仕様書通りに動作します。リスナーを既定で passive と扱うことで、ユーザーがスクロール中にページのレンダリングがブロックされることを防いでいます。デモが Google Developer サイトにあります。

GlobalEventHandlers

GlobalEventHandlers ミックスインは以下のイベントをグローバルイベントとして定義しており、 DOM 中のユーザーと対話できるあらゆる要素で利用できます。

GlobalEventHandlers.ontouchstart これは実験段階の API です。製品内のコードで使用しないようご注意ください。
touchstart イベントの グローバルイベントハンドラー
GlobalEventHandlers.ontouchend これは実験段階の API です。製品内のコードで使用しないようご注意ください。
touchend イベントの グローバルイベントハンドラー
GlobalEventHandlers.ontouchmove (en-US) これは実験段階の API です。製品内のコードで使用しないようご注意ください。
touchmove イベントの グローバルイベントハンドラー
GlobalEventHandlers.ontouchcancel これは実験段階の API です。製品内のコードで使用しないようご注意ください。
touchcancel イベントの グローバルイベントハンドラー

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

仕様書

仕様書 状態 備考
Touch Events – Level 2
TouchEvent の定義
ドラフト グローバル属性ハンドラーの ontouchstart, ontouchend, ontouchmove, ontouchend を追加
Touch Events
TouchEvent の定義
勧告 初回定義

ブラウザーの互換性

BCD tables only load in the browser

関連情報