TouchEvent

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

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

コンストラクター

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() の呼び出しは効果がありません。この動作を変更するためには、下記の例にあるように preventDefault() の呼び出しの後で passive オプションを false に設定すると、仕様書通りに動作します。リスナーを既定で passive と扱うことで、ユーザーがスクロール中にページのレンダリングがブロックされることを防いでいます。デモが Google Developer サイトにあります。

GlobalEventHandlers

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

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

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

仕様書

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

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
TouchEventChrome 完全対応 22Edge 完全対応 79
完全対応 79
未対応 ≤18 — 79
無効
無効 From version ≤18 until version 79 (exclusive): this feature is behind the Standards Preview preference (needs to be set to true).
Firefox 完全対応 52
完全対応 52
未対応 18 — 24
補足
補足 Removed in bug 888304 due to web compatibility issues.
IE 未対応 なしOpera 完全対応 15Safari 未対応 なしWebView Android 完全対応 ≤37Chrome Android 完全対応 25Firefox Android 完全対応 6Opera Android 完全対応 14Safari iOS 完全対応 ありSamsung Internet Android 完全対応 1.5
TouchEvent() constructorChrome 完全対応 48
補足
完全対応 48
補足
補足 Chrome only supports the following touchEventInit properties: touches, targetTouches, changedTouches.
Edge 完全対応 ≤79
補足
完全対応 ≤79
補足
補足 Edge only supports the following touchEventInit properties: touches, targetTouches, changedTouches.
Firefox ? IE 未対応 なしOpera 完全対応 ありSafari 未対応 なしWebView Android 完全対応 48
補足
完全対応 48
補足
補足 Chrome only supports the following touchEventInit properties: touches, targetTouches, changedTouches.
Chrome Android 完全対応 48
補足
完全対応 48
補足
補足 Chrome only supports the following touchEventInit properties: touches, targetTouches, changedTouches.
Firefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 3.2Samsung Internet Android 完全対応 5.0
補足
完全対応 5.0
補足
補足 Samsung Internet only supports the following touchEventInit properties: touches, targetTouches, changedTouches.
altKeyChrome 完全対応 22Edge 完全対応 ≤18Firefox 完全対応 52
完全対応 52
未対応 18 — 24
IE 未対応 なしOpera 完全対応 ありSafari 未対応 なしWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 6Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
changedTouchesChrome 完全対応 22Edge 完全対応 ≤18Firefox 完全対応 52
完全対応 52
未対応 18 — 24
IE 未対応 なしOpera 完全対応 ありSafari 未対応 なしWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 6Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
ctrlKeyChrome 完全対応 22Edge 完全対応 ≤18Firefox 完全対応 52
完全対応 52
未対応 18 — 24
IE 未対応 なしOpera 完全対応 ありSafari 未対応 なしWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 6Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
metaKeyChrome 完全対応 22Edge 完全対応 ≤18Firefox 完全対応 52
完全対応 52
未対応 18 — 24
IE 未対応 なしOpera 完全対応 ありSafari 未対応 なしWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 6Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
shiftKeyChrome 完全対応 22Edge 完全対応 ≤18Firefox 完全対応 52
完全対応 52
未対応 18 — 24
IE 未対応 なしOpera 完全対応 ありSafari 未対応 なしWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 6Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
targetTouchesChrome 完全対応 22Edge 完全対応 ≤18Firefox 完全対応 52
完全対応 52
未対応 18 — 24
IE 未対応 なしOpera 完全対応 ありSafari 未対応 なしWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 6Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
touchesChrome 完全対応 22Edge 完全対応 ≤18Firefox 完全対応 52
完全対応 52
未対応 18 — 24
IE 未対応 なしOpera 完全対応 ありSafari 未対応 なしWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 6Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

関連情報