iPhone/iPadでPCと同じJavaScriptのイベントを実装する

PC向けに作ったサイトをiPhoneやiPadでも利用できるようにする際に注意しなくてはいけないのがJavaScriptのイベントです。

iPhone/iPadではonmouseoverやonmousedownなどのonMouse系のイベントが利用できず、代わりにontouchstartやontouchmove、ontouchendなどのonTouch系のイベントが用意されています。

使い分けとしてはだいたい次のようになります。

ontouchstart = onmousedown

ontouchmove = onmousemove

ontouchend ≒onmouseup

ですのでjQueryを利用した場合、

var ua =navigator.userAgent;
if(ua.indexOf('iPhone') > -1 || ua.indexOf('iPad') > -1 || ua.indexOf('iPod')  > -1){
	var start = "touchstart";
	var move  = "touchmove";
	var end   = "touchend";
}else{
	var start = "mousedown";
	var move  = "mousemove";
	var end   = "mouseup";
}
$("#hoge").bind(start,function(){....})
$("#hoge").bind(move,function(){....})
$("#hoge").bind(end,function(){....})

などとするとPCとiPad/iPhoneでほぼ同様のイベントを設定することができます。
(イベントの発生のタイミングや状況などが若干異なるので細かい調整が必要になることもあります)

また、次のようなコードはiPad/iPhoneでエラーになります。

$("#hoge").bind(start,function(e){
	console.log(e.pageX);//NG
})

PCではイベント情報を｢e｣で取得できるのですが、iPad/iPhoneでは配列eventで複数の情報が返ってきます。次のように記述するとPCとiPhone/iPadで共通するイベント情報を取得できます。

$("#hoge").bind(start,function(e){
	if(!e.pageX)e = event.touches[0];
	console.log(e.pageX);//OK
})

event.touchesには１本目にタッチされた指2本目にタッチされた指の順番に配列に格納されています。

さらに次のようなコードではイベント情報は取得できません。

$("#hoge").bind(end,function(e){
	if(!e.pageX)e = event.touches[0];
	console.log(e.pageX);
})

ontouchendイベントはイベント情報を返してくれません。タッチが終了した時点で画面にタッチされていないからということらしいですが。。。

$("#hoge").bind(start,function(e){
	if(!e.pageX)e = event.touches[0];
	$(this).data("e",e);
})
$("#hoge").bind(move,function(e){
	if(!e.pageX)e = event.touches[0];
	$(this).data("e",e);
})
$("#hoge").bind(end,function(e){
	if(!e.pageX)e = $(this).data("e");
	console.log(e.pageX);
})

このように記述すると最後にiPad/iPhoneではontouchstartもしくはontouchmoveが最後に発生した際のイベント情報をontouchendで取得できます。

これでiPhone/iPadでPCとだいたい同じようなJavaScriptのイベントを実装することができます。

関連エントリー

PC用とiPhone用のサイトを切り替える.htaccess
iPhone用CSSをメディアクエリで分岐する問題点
jQuery基礎文法最速マスター
jQueryを良くする25のTIPS
8のjQueryのすごいTIPS

スポンサードリンク

«[書評]効率的なサイト作成のためのDreamweaverの教科書 | メイン | iPhone/iPadでダブルタップをJavaScriptで実装する»