スマートフォン用のサイトを作る場合は、jQuery Mobileやら、jQTouchやら、Sencha Touchやら色々ありますが、ちょっとそこまで必要ないときに、スマートフォン特有のイベントをjQueryを使って扱えないか触ってみました。 スマホ特有のイベント スマホ特有のイベントは幾つかありますが、今回は特に使われるであろうタッチ、スライド、ピンチイン、ピンチアウトに重点を置いて調べてみました。 上記操作に必要なイベントは以下の通りです。 touchstart touchmove touchend touchcancel gesturestart gesturechange gestureend 「touch***」というイベントが画面に指でタッチした、している時のイベント、「gesture***」というイベントが「二本指以上」の操作（ピンチイン、ピンチアウト、回転等）を行っている時

さいきん、スマホでもPCでも同じような動作を求められるWebAPIが増えていますよね。 動作はjQueryで書くことになるのですが、もともと用意されているイベント(click,mousemoveなど)ではタッチ操作を拾いきれないことがあります。 そこで、二つの環境の動作を同じ関数にまとめる定義を作りました。 基本のクリック動作、押下、移動、キャンセルの４種を定義できます。 サンプルコードです！ 動作定義部分と、jQuery拡張部分の二つに分けてご紹介します。 まずは、動作定義部分です。 上に置いてあるボタンは、こちらのコードで動作しています。 $(function(){ $('#hoge').touchInterface( function(e,$_this){ //タッチorクリックの動作 $_this.empty().append('action:up/end'); $_this.cs

iPhone/iPadでPCと同じJavaScriptのイベントを実装する PC向けに作ったサイトをiPhoneやiPadでも利用できるようにする際に注意しなくてはいけないのがJavaScriptのイベントです。 iPhone/iPadではonmouseoverやonmousedownなどのonMouse系のイベントが利用できず、代わりにontouchstartやontouchmove、ontouchendなどのonTouch系のイベントが用意されています。 使い分けとしてはだいたい次のようになります。 ontouchstart = onmousedown ontouchmove = onmousemove ontouchend ≒onmouseup ですのでjQueryを利用した場合、 var ua =navigator.userAgent; if(ua.indexOf('iPhone'

例えば、Javascriptのonclickを使って何らかの動作をさせたとします。PCでは問題ないですがスマホの場合、onclickだと数ミリ秒遅延してしまいます。それを防ぐために、touchstartを使うわけですが、その両方を指定してしまうと、スマホの場合touchstartを実行して更にonclickを実行してしまい、目的の動きができません。それを防ぐためのメモ。