ITハットMENUすべてのカテゴリーWeb制作93仕事効率化4Electron32016.11.06JS/jQueryでFastClick.jsを使ってスマホのclickイベントの300ms遅延をなくすみなさん、スマホのクリックイベント遅延の対応はどうしていますか。Web制作会社の制作実績などを見ていると、スマホのクリックイベント遅延に対応していないものが結構あるようです。対応にはいろいろなライブラリがありますが、その中でも最もテストされているFastClick.jsの使い方を紹介していきます。jQueryも使うので読み込んでおきます。FastClick.attach(document.body);});これでドキュメント全体に適用されます。クラスがついている要素のみにFastClickを適用させたいときどうするか。FastClick.attach($('.fc')[0]);こんな感じで特定のクラスがついた要素のみに適用させることができます。最近のブラウザではこのmetaタグが記載されていれば、モダンブラウザでは遅延が発生しなくなっています。できる限りこの指定はしておいたほうがよいです。FastClickはそれ以外のブラウザに対しても対応しているので、素晴らしいです。特定の要素のみ除外Bootstrapなどのドロップダウンにはデフォルトでタッチイベントが指定されており、FastClickを使ってしまうと相互に影響し合ってうまく動作しなくなります。そこで、このような場合にはFastClickを無効にする必要があります。Dropdown上のコードはBootstrapのドロップダウンのソースコードです。クラスを追加することでこの要素のみFastClickが適用されないようにしています。こんな感じで他ライブラリとの干渉も考慮できるので、非常に便利です。