TouchEvent

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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