タッチイベントで座標が上手く取れない問題のメモ

公開

タッチイベントが発生した場所の座標を取得しようとしたのですが、ハマったので記録しておきます。キービジュアルをCSS Transitionsで切り替えていくjQueryプラグインをフリック操作対応にしようかと検討していた時に起こりました。(Web Designing 2012年7月号のSmartphone Lab.を参考に勉強していました。)

座標が上手く取得できなかったコードは次のようなコードです。イベントハンドラ関数でeventを受け取り、changedTouchesプロパティから座標を読み取ろうとしているのですが、なぜかundefinedになってしまい座標が正しく取れませんでした。

var touchStartX;

$(".view").on("touchstart", function (event) {
 touchStartX = event.changedTouches[0].pageX;
});

色々試していくうちに、グローバルなeventオブジェクトを使うと座標が読み取れることに気付きました。(Web Designingのコードがeventとeを分けているのは間違いかと思っていました...笑)

jQueryのドキュメント「Event Object」を確認してみると、jQueryでイベントをバインドした際にイベントハンドラで受け取るイベントオブジェクトは、オリジナルのイベントオブジェクトではなく、W3C標準に従って(ブラウザの差異を?)統一したイベントオブジェクトのようで、ドキュメントのEvent Propertiesの項に列挙されたプロパティが取得できるようです。

Event Propertiesの項に列挙されたプロパティ以外は、event.originalEventオブジェクトにアクセスすることで取得できるとあったので、最初のコードを次のように変更したところ、無事座標を取得することができました。

var touchStartX;

$(".view").on("touchstart", function (e) {
 touchStartX = e.originalEvent.changedTouches[0].pageX;
});

今までイベントハンドラ関数でイベントオブジェクトを受け取る際、変数名をeventとしていたのですが、グローバルなeventと同一のものではなく紛らわしいので、eと書くことにしようかと考えています。