JQueryでtouch系のイベントをbindする時の注意

JQueryでtouch系イベント(touchstart、touchmove、touchendなど)をbindする際に以下のように引数を指定した形で定義すると思うが、ここで渡ってくる引数からはマウスの座標等は取得できないらしい(モバイル用があるからそちらを使用しろということかも知れないが)。

 

$( '#hoge' ).bind("touchmove", function(e) {
var x = e.changedTouches[0].pageX;      //  e に changedTouches は定義されていないので座標が取得できない
});
 

ここで取得するには window.event (グローバル変数)から取得する。

 

JQueryではなくコントロールの addEventListener でイベントハンドラを設定した場合は、その引数から取得可能。

var ctrl = document.getElementById('title');
ctrl.addEventListener('touchmove', function(e) {
var x = e.changedTouches[0].pageX;      // 正常に取得できる
});
 
※ 使用したJQueryのバージョンは 1.7.1
 
 

コメント

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です