iOS+jQuery:iPhone特有のイベント(2)

前回に引き続きiOSのタッチイベントについて書きます。
 
 

jQueryのイベントオブジェクトの注意点

iOSではイベントオブジェクトのtouchesプロパティにマルチタッチのデータがオブジェクト形式で
格納されているそうなので、まずはlengthを利用してタッチポイントの数を表示するサンプルを
作成しました。ソースは以下の様にjQueryのtextメソッドでdivに表示するようにしただけです。
タッチ数の確認(問題有り) ※iOSのsafariで確認してください。

$('#test').text(eo.touches.length);

 
しかし全く機能しません…。googleでタッチイベントについて検索するとjQueryは利用せずに
純粋なjavaScriptだけで作成しているものが多いので、jQueryでは対応できないと諦めかけて
いたのですが、以下のサイト様の記事によって問題が解決できました。
参考サイト:iphonesafariでjqueryを使ったイベントのバインドにおける注意
 
いろいろ調べてみると、jQueryではブラウザ間の差を吸収するために独自の
イベントオブジェクトを作成しているようです。独自イベントとは言いつつも、
大抵のイベントは継承しているので問題なく利用できるのですが、タッチイベントの
ような環境依存が大きい独自のイベントには当然対応していないため、
今回の問題につながったようです。
 
本家jQueryのサイトでもoriginalEventについて、少しだけ説明がありました。
「特別なイベントオブジェクトにアクセスしたいときはoriginalEventを使ってね」
だそうです。
参考サイト:Event Objectの解説ページ←ページ下部OtherPropertiesの項目
 
ということでoriginalEventを利用したら、きちんとタッチポイント数を取得できました。
サンプルは以下の通りです。
タッチ数の確認(OK) ※iOSのsafariで確認してください。
 
 
 

タッチ座標の取得

タッチ座標の取得には前述のtouchesに格納されたデータから取得できます。このあたりの説明は
以下のサイトが詳しいです。
iPhoneタッチ機能、ジェスチャ機能のプログラミング方法

clientXやscreenX、pageXなど似たような情報が多いのですがページのスクロールを禁止し
固定した状態では、たぶんどれも同じ値を指すような機がします。英語のサイトでは各プロパティ
がどのように異なるか説明があります。
Touching and Gesturing on the iPhone
 
ということでサンプル。ポイント数はいくらでも取れるようですが、2ポイントくらい有れば
充分だとおもうので2ポイント分しか表示していません。
タッチポイントの座標取得 ※iOSのsafariで確認してください。
 
2点間が取得できれば、オブジェクトの拡大縮小などの操作が可能になりそうです。
しかし、それには数学的な知識が必要になってきます。ところがiOSでは次回紹介する
ジェスチャーイベントを利用すると数学的な知識を必要とせず回転や拡大縮小の
ジェスチャーを取得することができるのです。
 
 
おしまい
 
 
 

コメントを残す

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


6 × 七 =


*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>