スマホ（スマートフォン）ではWebページのリンクがタップしてからページ移動を開始するまでやや遅く感じることが多い。
調べてみるとスマホ上では、タップしてからクリックイベントが発生するまで約300msの遅延が発生しているとのこと。
そこでtouchstart/touchendイベントを利用してシングルタップを高速に判定するjQueryプラグインを作ってみた。
実装概要
まずタップ検出対象に対して、touchstartが呼ばれたらtouchmoveおよびtouchendにリスナを設定。
タッチしてから指を離すまでに移動が無ければタップと判定し、カスタムイベントのtapを発火します。
それから従来のクリックイベントも同時に発火させるようにしました。
そしてjQuery.fn.tapで、上記のイベントリスナの設定と、カスタムイベントのtapに対してコールバックをbindを設定するようになっています。
また、PCの場合は自動的に従来のjQuery().click()のエイリアスとなります。
参考リンクの内容ほとんどまるパクリに近いですが、これ以上シンプルなロジックは考えられないのでご容赦くだされ。
jQuery Mobileのtapも同じことやってるんだろうか？まだ調べてません。
ソースダウンロード
特にライセンスなどは設けません。自由に複製・改編・再配布を行って結構です。jQueryバージョン1.4.3以上推奨。
jquery.tap-1.0.2.js
jquery.tap-1.0.3.js
※URLが変更されることがありますので直リンクなどはご遠慮ください。
使い方
// (1)タップしたらalert
$('#hoge').tap(function() {
alert('tapped!');
});
// (2)タップイベントを任意のタイミングで発動させる
$('#hoge').tap();
※ぶっちゃけ(2)の使い方はちゃんと検証してないので、正常に動かないかも･･･
改良予定
bind,unbindをoneに置き換える- dataをローカル変数に置き換える？
clickイベントの発火をjqueryでやる？
ツッコミなどお待ちしております。
コメント
＞匿名さん
申し訳ないですが、本稿のものは配布を目的にしておらず実験的に作っており、このような場合は必ずしもサンプルを付けるようにはしていません。
ご了承下さい。
サンプルくらい置いて欲しいです
[…] スマホでシングルタップのレスポンスを向上させるjQueryプラグイン […]
参考させていただきます。
＞匿名さん
情報ありがとうございます。最近全然メンテナンスしてなかったので、ちょっと見なおしてみます。
iOSのバージョンも教えていただけたら助かりますが…
iphone, ipadでこちらの使い方（１）を試してみると、
・タッチスタート時に１回ポップアップ
・タッチエンド時に２回ポップアップ
という状況がタッチする度に交互に発生します。
この現象はiphone, ipadのみで、パソコンや
androidタブレットでは発生しませんでした。
（タッチエンド時に１回ポップアップが発生するのみです）