CSS3

プロパティ

touch-action

→●、mdn

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

touch-action プロパティは、直な操作（プロパティの名前にもかかわらず、タッチのみに制限されない）により、ユーザー エージェントによるパン／ズーム操作用のふるまいが誘発されてよいかどうかを決定する。§ touch-action 値 を見よ。

ユーザー エージェントは、パン／ズーム操作の間は、そのポインターよる後続のポインター イベントを発火しないものとする。ユーザー エージェントは、次のすべてが満たされるときは、ポインターによるイベント連列を終了するために、名前 pointercancel のポインター イベントを発火するものとする（それに伴い、pointerout イベント、1 個以上の pointerleave イベントも発火されることになる）：

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

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

注記： touch-action は、埋め込まれた閲覧文脈を通して適用されることはない。一例として、touch-action が ある iframe に適用されたとしても、iframe の中で【 iframe が埋め込んでいる文書における】直なパン／ズーム操作用のふるまいに効果を及ぼすことはない。

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-left、pan-right、
pan-y、pan-up、pan-down

これらの成分値の組み合わせに対しては、ユーザー エージェントは、［要素上から始まる直な操作］を［指定された各成分が表す方向へのパン操作を開始する目的］に限って考慮してもよい。【例： pan-y のみなら縦のみ、pan-x pan-up なら縦と上方。】

逆方向が許容されていない場合でも【例： pan-right のときの左方】、パン操作が開始されたなら、利用者は逆方向にもパンできる。対照的に、単独の軸に制約されている場合には（例： 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-x pan-up;
">あああああああああ
</DIV>

manipulation

ユーザー エージェントは、［要素上から始まる直な操作］を［パン操作／継続的なズーム操作］の目的において考慮してもよい ― ただし、関係する他のふるまいのうち［一定時間内に起こらなければならない複数の作動化］に依拠するもの（二連タップでズームする／二連タップの最後に指を離さず（double-tap and hold）動かしてズームする など）は、誘発しないものとする。

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

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

¶注釈を省く

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

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

テスト