FastClick適用下でのチェックボックスにおける問題
業務でデザイナーから受け取ったツールキットを取り込んだ際に、チェックボックスが期待通りに動かないからもしかしてFastClickのせいかなと思って調べたまとめ。
そもそもFastClickとは
スマホではダブルタップを判定するためにタップしてからイベント発火するまで300msの待ちがある。 FastClickはその待ちを消してタップが早く反応するようにするもの。
問題
例として以下のようなHTMLがあるとする。
<label> <div> <input type="checkbox"> </div> </label>
上のHTMLはのエリアをタップするとチェックボックスが反応することが期待されてる。 しかしiOSにおいて期待通りの動きにならず、以下の対応もしてみたがiOS5/6/7のうち6/7は改善が見られなかった。
もしかしたらと思い、FastClick.jsを使わないようにしてみたらiOSでも動いたのでFastClickを調べてみた。
原因
FastClick本家にもissueが上がっていた。 このissueの内容を見てみると以下のような場合において正常に動作するよう対応がされたぽい。
<label><input type="checkbox">Checkbox</label>
もしくは
<label for="checkbox1">Checkbox</label> <input type="checkbox" id="checkbox1">
でもこの対応だとlabelタグの外側にinputタグを配置するか、labelタグの中に含める場合でも 1階層下 までにinputタグがないといけないらしく、前述したHTMLのようにlabelタグから深い階層にinputタグがあるとうまく動かなかった。
で新たなissueが作られてて
この中では 「深い階層でもいけるようにできるか調べてみるぜ!」 的なことが当初言われてたあとに、 「cssいじったら動いたしこっちのがコスト低いからcssいじってちょ!」 っていう結論に至ってました。 でどうcssをいじればいいかというと
label > * { pointer-events: none; }
ためしに上記のcssを前述のHTMLを使ってる画面に反映させてみたところ、見事に動きました。
結論
- FastClickを使うのをやめる (一番簡単だけどできればしたくない)
- cssに上述のやつを追加する
- inputタグがlabelタグの 2階層 以上深くならないようにHTMLを変更する