スマートフォンで, リンクやゲーム要素をタップした際の反応を遅いと感じたことはないでしょうか？ 終盤に実機確認してこの問題が発覚! どうしよう... なんてことを経験した方も少なくないと思います.

そんなときは, 今回紹介する FastClick を使いましょう. 既存のページでも後から簡単に導入できます.

Cordova とかで包んでアプリを出している方なんかにもオススメです.

デモ

デモです. 左側には通常のものを, 右側には FastClick を適応させた要素を置いています. クリックすると明らかに右側のほうが反応速度が速いのがわかるかと思います.

スマートフォンで手軽に確認できるよう QR コードも置いておきます.

FastClick とは？

モバイル端末でのクリックイベントは

• touchstart
• touchend
• cilck

という順番で発火するのですが, このタップとクリックの間に 300ms の遅延が発生します. この遅延を解消してくれるのが FastClick です!

これを導入するだけで, ほぼ touchend と同じタイミングで click イベントを発火してくれるようになります.

• FastClick by ftlabs
• ftlabs/fastclick: Polyfill to remove click delays on browsers with touch UIs

インストール

cdnjs で読み込みましょう.

<script src='https://cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.6/fastclick.min.js'></script>  

使い方

最初に, HTML の head に下記のような meta タグを追加します.

<meta name="viewport" content="width=device-width, initial-scale=1">  

FastClick を適応させたい要素に attach するだけです.

FastClick.attach( DOM要素 );  

全体に適応させたい場合は下記のように document.body を渡してあげれば ok です!

document.addEventListener('DOMContentLoaded', function() {  
  FastClick.attach(document.body);
}, false);

注意点

根本的な処理のタイミングが変わってしまうのでライブラリによっては, 上手く動かなくなってしまうことがあります.
導入後は, 怪しいところをかならずチェックしましょう!!

以上, お手軽便利な FastClick の紹介でしたー.