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

iPhoneのsafariでは、PCとはことなるイベントを利用できるとそうなので挑戦してみました。
※Androidでも利用できるそうですが、機種によってはマルチタッチの検出ができないようです。
 
 
 

セレクタにはdocument

まず画面にタッチしたら発生するイベントtouchstartのシンプルなサンプルを作成しました。
画面にタッチしたらdivにtouchstartと表示するだけのサンプルです。
touchstartの確認(問題有り)
※iOSのsafariで確認してください。
 
ここで早速問題発生です…。イベントの取得には成功したのですが、htmlの要素がある範囲だけ
でしか取得できません。ページ大半の何もないところではイベントを受け取れないのです…。
 
iPhone特有のイベントをgoogle検索すると、ほとんどはjQueryを利用しない形で紹介されてい
ました。しかしヒントは掴めました。これらのサイトではdocumentに対してイベントを設定して
いたのでjQueryでもそうすれば良いのだと。
 
実際jQueryのセレクタにもdocumentは利用できます(何よりreadyイベントのセレクタは
documentなのですから)。ということでセレクタをdocumentにした下記のサンプルでは
正常に機能しました。
touchstartの確認(OK)
※iOSのsafariで確認してください。
 
 
 

touchstart/touchmove/touchend

続いてtouchstart以外のイベントを確認します。iPhoneでは以下4種類のタッチイベントが
利用できるそうです。

iPhoneのタッチイベント
・touchstart:タッチを検知したときに発生
・touchmove:タッチポイントが移動したときに発生
・touchend:タッチが終了したときに発生
・touchcancel:システムによってタッチイベントがキャンセルされたときに発生

 
touchcancelは発生のさせ方がよく分からないので、それ以外の3つを確認するサンプルを
作成しました(touchcancelの利用法としては、何らかの事情によってシステムからタッチ
イベントをキャンセルさせられたときに備えて、タッチイベントを終了するようにしたほうが
良さそうなので、touchendと同じ処理をするようにすると良い気がします)。
いろいろなイベント(問題有り)
※iOSのsafariで確認してください。
 
上記サンプルではイベントの取得に問題はないものの、タッチイベントによってページが移動して
しまうため、私の想定と異なりました。で、ここでもgoogle先生に聞いてみるとブラウザ本来の
機能をOFFにして利用することが分かりました。
 
ブラウザの通常の機能をOFFにするのはjQueryの記事でも書いたpreventDefaultメソッドです。
タッチイベントでもこれが利用できます。ということでpreventDefaultを利用した
以下のサンプルを作成しました。これでタッチイベントでページが移動することを防げます。
いろいろなイベント(OK)
※iOSのsafariで確認してください。
 
今回はここまで、次回はマルチタッチについて書こうと思います。
 
 
 

コメントを残す

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


8 × 三 =


*

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