例えばこの記事を見て、
html { touch-action: none; }
ってそのまんま書いてみちゃってませんか？
実はこれ罠があるのでちゃんと意味を知っておかないと困ります。
そう、私のように・・。
何が起こるか
Tap delayを消したいがためにコレを書くと、単純に「画面のスクロールすらできなくなる」場合があります。
再現端末例: Xperia Z1 / Android Chrome 40
まーたAndroidがやらかしたのかと最初は思ったんですけど、まぁ割とハイスペックな端末で、かつChromeなんですよね。
まあiPhone5 / iOS Chrome 40だと起こらないのでまーたAndroidか案件には変わりないんですけど・・。
touch-actionとは
さて、そもそもこれはTap delayを消すために存在するプロパティではないので、そこを知らないとハマりますよっていうお話です。
そしてそもそも冒頭の資料にもあるように、これを指定してTap delayが消えるのはIE系の話です。
なので、Tap delayも消えない他の環境で指定するとどうなるか、です。
指定できる値は以下5つ。
- auto
- none
- pan-x
- pan-y
- manipulation
もちろん実装があればですが、それぞれ指定で以下のようになります。
auto
The user agent may determine any permitted touch behaviors, such as panning and zooming manipulations of the viewport, for touches that begin on the element.
デフォルトの値で、何も指定してないときと同じ。
画面のスクロールもズームも、なんでもできるよって指定。(もちろんviewportのmetaタグとかで縛ってなければ)
none
Touches that begin on the element must not trigger default touch behaviors.
その名の通り。
画面さわってもうんともすんとも。
よって、画面スクロールもできなくなります。
pan-x | pan-y
The user agent may consider touches that begin on the element only for the purposes of horizontally | vertically scrolling the element's nearest ancestor with horizontally | vertically scrollable content.
X方向 | Y方向それぞれのスクロールだけを許可するならコレ。
これが地味に賢くて、"やや斜め上"みたいなものも、上方向としてちゃんと処理してくれます。
manipulation
The user agent may consider touches that begin on the element only for the purposes of scrolling and continuous zooming. Any additional behaviors supported by auto are out of scope for this specification.
noneと同じだが、スクロールとズームだけは通すようにするならコレ。
まぎらわしい用語や概念
touch*イベントが発火しないってこと？
これは関係ないです。
touch-action: none;な要素に対しても、普通にイベントは発火します。
スワイプバナーとかも問題なく動作します。
aタグやbuttonは？
動きます。
overflow: scroll
指定によっては動かないです。
panningってなに？
画面をスワイプしたり動かそうとするアレです。
指を画面に乗っけて、そのまま指を動かしたらそれはもうpanです。
なので画面をスクロールしようとする動作も含みます。
scrollingとpanningは一緒？
panningした結果、画面がスクロールするので、おそらく一緒。
manipulation 以上 none 以下ってどういう動きがある？
わかりません！(ホールドとか？)
これは知ってる人おしえてください。
というわけで
モバイルでは実質まだまだ使えねーやつです。
ただAndroid標準ブラウザやiOS Safari、古い端末でChromeのバージョンが古かったりすると(効かないから)起きないけど、
新しい端末で最新のChromeとか使ってると、正常に効いてしまって思わぬ罠にかかることがあります。
ちゃんと確かめないままにnoneを指定してたりすると、なんでもないページでスクロールできなくて、
「え、こんな品質でリリースするつもり？わろすわろすm9(^Д^)」とかって知らない人に言われるので注意です。
私はこう思う
- 既に出回ってる端末のことを考えると、モバイルでclickイベント使うのは来世までpend
- なのでfastClickに準ずるものはほぼ必須
- ゆえに今さらtouch-actionなんて実装されても使い道がない・・
- どうしてもIE系で指定したいなら、noneじゃなくてmanipulationにしといたほうが無難
- てかいつ使うのコレ