CSS3

プロパティ

touch-action

[Edge]△。→●、mdn

タッチ入力により、ユーザー エージェントが給する既定のふるまい…

touch-action CSS プロパティは、タッチ入力により、ユーザー エージェントが給する既定のふるまいが誘発されてよいかどうかを決定する。これには、少なくとも、パン／ズーム操作のふるまいが含まれる。§ touch-action 値 を見よ。

注記： 先に注記したように、タッチ以外のポインター型にも既定のふるまい（パン操作やズーム操作など）を許容するユーザー エージェントは、その種のポインター型にもタッチと同じように適用するものとする。一例として、スタイラスによるパン操作／ズーム操作を許容するユーザー エージェントは、どの既定のふるまいを取り扱うかを決定する際に、関連する touch-action 値を織り込むものとする。

ユーザー エージェントは、タッチ用の既定のふるまいを実行している間は、そのポインターよる後続のポインター イベントを発火しないものとする。ユーザー エージェントは、次のすべてが成立するときは、ポインターによるイベント連列を終わらせるため、名前 pointercancel のポインター イベントを発火するものとする（それに伴い、pointerout イベント、一つ以上の pointerleave イベントも発火されることになる）：

• ユーザー エージェントは、そのタッチ入力を、タッチ用の既定のふるまい用に消費するものと決定した（その決定法は、この仕様の視野から外れる）。
• 【そのイベント連列において】ポインター用の pointerdown イベントは、すでに送信した。
• ポインター用の［（前項の pointerdown に後続する）pointerup］／pointercancel イベントは、まだ送信していない。

注記： ユーザー エージェントは、既定のふるまい用に［一連の別個のジェスチャーをはらが、それらすべてが単独の継続的なジェスチャーを成すものとして扱われる］ような複階的なジェスチャーを実装してもよい。例えば、利用者がタッチ スクリーン上で“投げつける”ようにスクロールする（“fling to scroll”）ジェスチャーを考える ― 敏捷な指の動きで、文書のパン操作を開始して、タッチス クリーンから指を離したとき、文書は惰性でスクロールし続けるような。文書がまだ動いている間、利用者は、タッチ スクリーンに指を置いて別の“投げつけ”を実行するかもしれない ― 現在のスクロール操作に対し、もっと勢いをつけるか、制動して［遅める／停止する／逆方向にする］ような。この仕様は、ジェスチャーと既定のふるまいがどう実装されるかは、規範的に定義しない ― 2 度目のタッチが（現在のスクロール操作に対する 2 度目の“投げつけ”／制動として解釈される前に）ポインター イベントを発火するべきかどうか裁定するのは、ユーザー エージェントに委ねられる。

auto ↑

ユーザー エージェントは、要素上から始まるタッチ用の既定のふるまいを任意に決定してよい。

<DIV style="border:1px solid red; width:200px; height:200px;
 touch-action:auto;
">あああああああああ
</DIV>

あああああああああ

none ↑

ユーザー エージェントは、要素上から始まるタッチ用の既定のふるまいを誘発しないものとする。

<DIV style="border:1px solid red; width:200px; height:200px;
 touch-action:none;
">あああああああああ
</DIV>

あああああああああ

pan-x、pan-y ↑

これらの成分値の組み合わせに対しては、ユーザー エージェントは、要素で始まるタッチを、［各成分が表す各軸方向へのスクロール操作を開始する目的］に限って考慮してもよい。【例えば pan-y のみならば縦のみ、pan-x pan-y ならば縦横両方とも。】

スクロール操作が開始されてから、利用者がスクロールできる方向は、単独の軸に制約されている場合には（例： pan-y）、その軸に限られる。【原文には“逆方向へスクロールできる”という記述もあるが、仕様更新により意味を成さなくなったので、和訳は省略する。】

<DIV style="border:1px solid red; width:200px; height:200px;
 touch-action:pan-x;
">あああああああああ
</DIV>

あああああああああ

<DIV style="border:1px solid red; width:200px; height:200px;
 touch-action:pan-y;
">あああああああああ
</DIV>

あああああああああ

manipulation ↑

ユーザー エージェントは、要素上で始まるタッチを、［スクロール操作と継続的なズーム操作］の目的に限って考慮してもよい。auto においてサポートされる 他のどのふるまいも、この仕様の視野から外れる。

<DIV style="border:1px solid red; width:200px; height:200px;
 touch-action:manipulation;
">あああああああああ
</DIV>

あああああああああ

注記： 各 実装に共通な追加の touch-action 値も、[COMPAT] にて 定義されている。

注記： 用語“パン”と“スクロール”は、同義語と見なされる。［パン操作やスクロール操作を誘発する操作やジェスチャーを定義すること／auto や none 値用の誘発のふるまい］は、この仕様の視野から外れる。

注記： touch-action プロパティを適用し得る要素は、CSS width、height プロパティ [CSS21] のいずれも適用し得るものに限られる。この制約は、ユーザー エージェントがタッチ動作の応答性を最適化し易くするための設計である。span（[HTML5]）などの置換されない行内要素など、既定ではサポートされない要素用には、作者は、CSS display プロパティに［block などの width、height を適用し得る値］を設定できる。将来の仕様は、この API をすべての要素にまで拡張し得る。

注記： 一部のタッチ用の既定のふるまいを不能化すると、ユーザー エージェントによる他のふるまいに対する応答が素早くなることもある。例えば、ユーザー エージェントによっては、連続タップ ジェスチャーを取り扱えるようにするため、click の前に 300ms ほどの遅延を自動的に入れるものもある。そのような事例では、touch-action に明示的に値［none ／ manipulation］を設定することにより、この遅延は除かれることになる。タップや連続タップ ジェスチャーを決定するための手法については、この仕様の視野から外れることに注意。

<div style="touch-action: pan-x;">
この要素は、横方向へパンしていないときはポインター イベントを受け取る 
</div>

<div style="overflow: auto;">
    <div style="touch-action: none;">
この要素は、すべてのタッチに対しポインタイベントを受け取る。
    </div>
    <div>
この要素上のタッチは、親を操作するために消費され得る。
    </div>
</div>

テスト