jQuery Mobileでタップの300ms遅延を解消する方法 ― 実はFastClickは不要

モバイル向けWebサイトやアプリを開発していると、ボタンをタップしてから反応まで約300ミリ秒の遅延が発生する問題に直面することがあります。この遅延を解消するために、FastClickのようなサードパーティ製プラグインを導入する開発者は少なくありません。しかし、jQuery Mobileを使用しているプロジェクトであれば、FastClickなどの外部プラグインは必要ありません。

vclickイベントで遅延を解決できる

jQuery Mobileには、ネイティブのclickイベントの代わりとして使えるvclick（仮想クリック）イベントが標準で用意されています。vclickイベントはモバイル端末でのタップを即座に検出し、クリックイベントをエミュレートするため、300ミリ秒の待ち時間が発生しません。

さらに便利な点として、vclickイベントはデスクトップブラウザでも正常に動作します。そのため、PCとスマートフォンの両方に対応したクリック処理を、ひとつのイベントハンドラだけで記述できます。

実装例

使い方は非常にシンプルです。通常のclickイベントと同じ書き方で、イベント名をvclickに置き換えるだけです。

$(document).on('vclick', '#impButton', function(){
  // ボタンがタップされたときの処理
});

この例では、IDが「impButton」の要素がタップされると、関数内に記述した処理が即座に実行されます。既存のコードから移行する場合も、イベント名を変更するだけで済むため、導入コストはほぼゼロです。

まとめ

• jQuery Mobile環境では、FastClickなどのサードパーティ製プラグインを追加する必要がない
• 標準のvclickイベントを使えば、モバイル・デスクトップ問わず300ミリ秒の遅延なしにクリック処理を実装できる
• 書き方は通常のclickイベントとほぼ同じなので、既存コードへの組み込みも簡単

jQuery Mobileを採用しているなら、余計なライブラリを増やすことなく、標準機能のvclickイベントを活用して快適なタップ操作を実現しましょう。