こんにちは、さち です。
先日、スクフェス イベント見積もり を作っていた時
ラブカストーン数を調整するボタンの反応が遅いという
困った事態に遭遇しました。
連続で押すボタンでなければ大きな問題ではないんですが
「数値」を調整するボタンなので
連打をする人がいる可能性は高い…。
ということで、解決法を調べてみました。
タップの反応が遅いのはわざと
スマホは、ダブルタップ に対応するために
シングルタップが有効になるまで
あえて 300ミリ秒（=0.3秒） の遅延を持たせているそうな。
0.3秒 なんて一見すごく短い時間に思えますが
実際に操作してみると誰もが反応の悪さに気付くレベル。
連続で押すようなボタンではさらに目立ちます。
<meta name="viewport"> で
「user-scalable=no」 や 画面の拡大禁止 を行うと
シングルタップの反応速度を上げられますが
この方法は Chrome と Firefox にしか効果がないようです。
（iPhone の Safari，Android の ブラウザ は遅いまま）
他の方法はないかとネット検索をしていると
「fastClick」という jQuery プラグインを発見。
早速、導入します！
前準備
- GitHub から「jQuery fastClick plugin」をダウンロード。
- zipファイルを解凍すると「jQuery.fastClick.js」ができます。
サーバにアップロードしましょう。
- 「jQuery fastClick plugin」は名前のとおり jQuery のプラグインです。
読み込みの記述は必ず jQuery より後にします。<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <script src="jquery-1.11.2.min.js"></script> <script src="jquery.mobile-1.4.5.min.js"></script> <script src="jQuery.fastClick.js"></script>
連続でボタンを押すことが想定される場合は
ダブルタップと認識され画面がズームする恐れがあるため
<meta name="viewport"> に
「user-scalable=no」を書いた方がよいかもしれません。
使い方
イベントで、「click」の代わりに「fastClick」を使うだけ。超簡単！
スマホ はもちろん、PC のクリックでもちゃんと動きます。
$('button').fastClick(function() {
alert('clicked!');
});
「touchstart」「touchend」のイベントを使って
遅延のないシングルタップを自力実装する方法もありますが
jQuery を使っているならこの方法が楽で簡単ですね。
→ dave1010 / jquery-fast-click - GitHub
【参考サイト】
コメント