iPhone/iPadでダブルタップをJavaScriptで実装する

iPhone/iPadのJavaScriptでは「onclick≒タップ」なのに「ondblclick≠ダブルタップ」となるのでダブルタップを利用したい場合は独自に実装しなくてはいけない。

次のように記述するとjQueryで擬似的にダブルタップを実装することが出来ます。

$("p").data("dblTap",false).click(function(){
	if($(this).data("dblTap")){
		//ダブルタップ時の命令
		console.log("ダブルタップ");
		$(this).data("dblTap",false);
	}else{
		$(this).data("dblTap",true);
	}
	setTimeout(function(){
		$("p").data("dblTap",false);
	},500);
})

data("dblTap")というフラグを用意して最初のタップでフラグをtrueに変換します。フラグは500ミリ秒後にfalseに戻ります。フラグがtrueの間(500ミリ秒経過する前)にもう一回タップされた場合はダブルタップと判定することが出来ます。(ダブルタップの感覚を調整したい場合はsetTimeoutの500を調整)

関連エントリー

iPhone/iPadでPCと同じJavaScriptのイベントを実装する
PC用とiPhone用のサイトを切り替える.htaccess
iPhone用CSSをメディアクエリで分岐する問題点
jQuery基礎文法最速マスター
jQueryを良くする25のTIPS

スポンサードリンク

«iPhone/iPadでPCと同じJavaScriptのイベントを実装する | メイン | jQueryでiPhone/iPadの向きを検出する»