要旨
最近はもっぱらスマホでWebを見るほうが多くなってきました。
にも関わらず、スマホのClickイベントの遅延対策が行われていないwebサイトが結構多いです。
これはイライラの原因です。
これを解消する優れたライブラリが存在していて
使い方も非常に簡単なので(数行コピペするだけ)
ぜひ皆さん使って世界から
Clickイベント遅延を駆逐しましょう！
どうすればいいの？
１. FastClick.jsの読み込み
以下を <head> 以下に入れる
<script type='application/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.6/fastclick.min.js'></script>
２. FastClick.jsの初期化
以下コードを さっき入れたコードよりも後に差し込む
<script>
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body);
}, false);
}
</script>
これだけです。
スマホでaタグ等をクリックすると一瞬で読み込みが始まっているのがわかるかと思います。
どれくらい遅延するの？
| OS | 遅延 |
|---|---|
| iOS | 350ms |
| Android | 300ms |
| この表のとおりです。 |
体感してみる
- 遅延しているのがよくわかるGoogleの動画
- 自作デモ fastClickのデモを参考に。
なぜ遅れるの？
ダブルタップによるズームイン/ズームアウトを検知するため。
１回タップした後、２回目のタップがされるかどうかを待っている。
発展
なぜFastClick.jsなの？
JSを使わずに、遅延を解消する方法はいくつかありますが、すべてのブラウザに対応するにはJSを使うしかありません。ならば、たくさんの人が使い、テストされ尽くしたライブラリを使ったほうが安全です。いくつかライブラリがありますが、Clickイベントの遅延だけにフォーカスされているライブラリでは現状FastClick一択だと思われます。
I highly recommend fastclick.js. It’s heavily tested, widely used and works great on many devices.
拙訳： 私はFastclick.jsを強く勧める。これは非常によくテストされ、広く使われており、たくさんのデバイスでうまく機能してくれる。
Ionic co-creator Adam Bradley
出展: http://blog.ionic.io/hybrid-apps-and-the-curse-of-the-300ms-delay/
副作用は？
- ダブルタップによるズームイン/ズームアウトが効かなくなります。
viewportにwidth=device-width入れればいいんじゃないの？
- 一部のブラウザだけしかうまくいきません。
参考になるページ