jQueryでタッチパネルを扱う
友人のノートPCのタッチパネルが羨ましすぎたのでタッチイベントで遊んでみました。 開くと真っ白いだけのなんもない画面が出ます。 その上でマウスを動かすか、タッチすると円がぷわーってこう、こう、まあともかく実物見て。
流石jQuery・・・だからなのかjavascriptのおかげなのかは分からないけれど、同時タッチ数に制限はない（はず）。
使い方は結構簡単で、
$('#target').bind('touchstart', function(){
event.preventDefault(); // ページが動いちゃったりズームしちゃったりを止めるらしい。右クリックも効かなくなるっぽいので注意。
for(var i=0; i<event.changedTouches.length; i++){
event.changedTouches[i].pageX // X座標
event.changedTouches[i].pageY // Y座標
}
});
みたいな感じ。
touchstartの部分をtouchmoveにしてやると、タッチしたまま動かしたときになります。
タッチ終了したときのイベントはtouchend。終了地点の座標は取れないらしい。
参考: iPhone/Android/PC 対応。jQuery で書くタッチイベント (フェンリル | デベロッパーズブログ)
追記
どうやら、firefox（つまりgecko？）ではeventは引数として渡されるみたいです。
なので、ソースは
$('#target').bind('touchstart', function(event){
みたいな感じに修正が必要。
どっちにも対応するなら
$('#target').bind('touchstart', function(e){
としておいて、
if(typeof(event) == 'undefined'){
event = e;
}
のような感じで対応するといいかも。
追記
jQueryを使用してイベントハンドラを登録した場合、
event.originalEvent.changedTouches
のようにして取得しなきゃいけないようです。 jQueryと銘打っちゃったけど、実はきちんと対応されてないのか・・・？