【Web制作】iPhoneで、Labelやcheckboxのタップが動作しない

  • 投稿 : 2018-03-23
label > * { pointer-events: none; }

もしかしたらと思い、FastClick.jsを使わないようにしてみたらiOSでも動いたのでFastClickを調べてみた。

結論
1.FastClickを使うのをやめる (一番簡単だけどできればしたくない)
2.cssに上述のやつを追加する
3.inputタグがlabelタグの 2階層 以上深くならないようにHTMLを変更する
FastClick適用下でのチェックボックスにおける問題 - tofucodes diary

はてなブログのテーマを作成したら、なぜか、タップ(クリック)が反応してない雰囲気で困りました。Wordpressでは動作するので、おかしいなぁといろいろ調べたら、上記がヒットしました。で、上記のCSSを追加すると問題なく動作したので、原因はこれだと思います。

FastClick.jsかFastClick.jsに類するものがはてなブログ標準で動作しているので、こういう症状になったのだと思います。

その他

<label onclick="">
  <input type="checkbox" name="cb" />説明文
</label>

onclickの追加(今回は、効果なかった)

label {
    cursor: pointer;
}

これも、今回は効果なかった。

参考:
inputに対するlabelタグが効かないiOS版のSafari。これを回避するには…。 - freefielder.jp
iPhone・iPadでlabelを効かせるには - Qiita

他、検索した感じでは、上記の2つの観点で解決したとか書かれているものが多かったと思います。
スポンサーリンク