JS/jQueryでFastClick.jsを使ってスマホのclickイベントの300ms遅延をなくす

みなさん、スマホのクリックイベント遅延の対応はどうしていますか。Web制作会社の制作実績などを見ていると、スマホのクリックイベント遅延に対応していないものが結構あるようです。対応にはいろいろなライブラリがありますが、その中でも最もテストされているFastClick.jsの使い方を紹介していきます。

ダウンロード

https://github.com/ftlabs/fastclick

導入

読み込み

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="path/to/fastclick.js"></script>
</body>

</body> の直前で読み込みます。jQueryも使うので読み込んでおきます。

使い方

$(function()
{
　　FastClick.attach(document.body);
});

これでドキュメント全体に適用されます。

特定の要素のみに適用

...



...

fc クラスがついている要素のみにFastClickを適用させたいときどうするか。

FastClick.attach($('.fc')[0]);

こんな感じで特定のクラスがついた要素のみに適用させることができます。

最近のブラウザでは

このmetaタグが記載されていれば、モダンブラウザでは遅延が発生しなくなっています。なので、できる限りこの指定はしておいたほうがよいです。FastClickはそれ以外のブラウザに対しても対応しているので、素晴らしいです。

特定の要素のみ除外

Bootstrapなどのドロップダウンにはデフォルトでタッチイベントが指定されており、FastClickを使ってしまうと相互に影響し合ってうまく動作しなくなります。そこで、このような場合にはFastClickを無効にする必要があります。

Dropdown

上のコードはBootstrapのドロップダウンのソースコードです。needsclick クラスを追加することでこの要素のみFastClickが適用されないようにしています。こんな感じで他ライブラリとの干渉も考慮できるので、非常に便利です。