スマホのclickを100倍高速化する「fastClick.js」

AndroidでHTML5アプリを作っているのですが、ページの遷移やクリックの反応がとにかく遅い。

体感的に0.5秒後に動作が始まる感じで、クリックとかスクロール、ドラッグ等全てがもたつくように感じる。

これを激速に改善するjavascriptが存在する。

Androidブラウザで反応が遅いのはなぜかというと、
スマホのclickの判定は、
touchstart
↓
touchend
↓
click
という順でclickに行き着くらしい。

これは長押しやスワイプなど、ある程度画面に触り続ける操作が存在するため、このような仕様になっている。

しかしWEBページにおいてそのような長押しが必要な場面はほとんど無く、タッチしたらクリックと同義なのだから速く動いて欲しい。

それを実現するのがfastClick.jsというわけだ。

仕組みとしては、touchstartをキャンセルしてclickイベントをすぐに発火してくれるというもの。

fastClick.Jsの使い方

ダウンロード

https://github.com/kyo-ago/fastClick.js

実装

$(window).load(function(){
    fastClick();
})

セレクタを指定可能

fastClick('#target');

除外も可能

fastClick('#target', '#ignore');

これでaタグもクリックイベントもjQuery-uiのdraggableもパララックスのスクロールも劇的に早くなります。