1. top
2. blog
3. 2014
4. 06

jQueryでタッチパネルを扱う

2014-06-26

• Web
• jQuery
• JavaScript

友人のノート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 で書くタッチイベント (フェンリル | デベロッパーズブログ)

$('#target').bind('touchstart', function(event){

$('#target').bind('touchstart', function(e){

if(typeof(event) == 'undefined'){
    event = e;
}

event.originalEvent.changedTouches