Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

TouchEvent

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

タッチは Touch オブジェクトによって表します。それぞれのタッチで位置、サイズ、形状、圧力、対象要素を示します。タッチのリストは、TouchList オブジェクトで表します。

コンストラクタ

TouchEvent()
TouchEvent オブジェクトを作成します。

プロパティ

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

TouchEvent.altKey 読取専用
タッチイベントが発生したときに alt キーが押下されていたかを示す論理値です。
TouchEvent.changedTouches 読取専用
前回のタッチイベントと今回のイベントの間に接触状態が変化した、個々の位置を表す Touch オブジェクトすべてで構成される TouchList です。
TouchEvent.ctrlKey 読取専用
タッチイベントが発生したときに control キーが押下されていたかを示す論理値です。
TouchEvent.metaKey 読取専用
タッチイベントが発生したときに meta キーが押下されていたかを示す論理値です。
TouchEvent.shiftKey 読取専用
タッチイベントが発生したときに shift キーが押下されていたかを示す論理値です。
TouchEvent.targetTouches読取専用
現在タッチ面に接触している、かつイベントのターゲットと同じ要素でタッチを始めた Touch オブジェクトすべてで構成される TouchList です。
TouchEvent.touches 読取専用
ターゲットや変化の状態にかかわらず、タッチ面に現在接触しているすべての個所を表す Touch オブジェクトで構成される TouchList です。

タッチイベントのタイプ

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

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

touchstart

ユーザがタッチ面のタッチ個所に触れたときに発生します。イベントのターゲットは、タッチが発生した場所の element です。

touchend

ユーザがタッチ個所のタッチ面から離れたとき (すなわち、指やスタイラスをタッチ面から離したとき) に発生します。これは、タッチ個所がタッチ面の端より外に移動したとき (例えば、ユーザが指をスクリーンの端より外に動かしたとき) にも発生します。

イベントのターゲットは、タッチ個所に対応する touchstart イベントを受け取った element と同じです。タッチ個所が当該要素の外側に移動した場合も同様です。

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

touchmove

ユーザがタッチ面でタッチ個所を動かしたときに発生します。

イベントのターゲットは、タッチ個所に対応する touchstart イベントを受け取った element と同じです。タッチ個所が当該要素の外側に移動した場合も同様です。

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

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

touchcancel

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

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

GlobalEventHandlers

これは実験段階の機能です。
この機能は複数のブラウザで開発中の状態にあります。各ブラウザで用いるために、適切なベンダー接頭辞が必要な場合があります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザの将来のバージョンで変更になる可能性があることに注意してください。

GlobalEventHandlers.ontouchstart
touchstart イベントの グローバルイベントハンドラ
GlobalEventHandlers.ontouchend
touchend イベントの グローバルイベントハンドラ
GlobalEventHandlers.ontouchmove
touchmove イベントの グローバルイベントハンドラ
GlobalEventHandlers.ontouchcancel
touchcancel イベントの グローバルイベントハンドラ

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

仕様

仕様書 策定状況 コメント
Touch Events – Level 2
TouchEvent の定義
勧告改訂案 ontouchstartontouchendontouchmoveontouchend グローバルイベントハンドラを追加。
Touch Events
TouchEvent の定義
勧告 最初期の定義

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート 22.0 18.0 (18.0) 未サポート 未サポート 未サポート
機能 Android Android Webview Chrome for Android Firefox Mobile (Gecko) Firefox OS IE Mobile Opera Mobile Safari Mobile
基本サポート (有) (有) (有) 6.0 (6.0) (有) 11 (有) (有)
TouchEvent() (有) (有) (有) (有) (有) (有) (有) (有)

関連情報

ドキュメントのタグと貢献者

 このページの貢献者: yyss
 最終更新者: yyss,