iPhone/iPod touchのSafariやUIWebViewのJavaScriptで使えるタッチイベントのメモ

画面の固定

スクロールすると座標計算がややこしくなるので、画面を固定する。
・横方向
  metaタグを追加

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

・縦方向
  touchmoveイベント中でevent.preventDefault()を実行する。

イベントの種類

onTouchStart
onTouchMove
onTouchEnd
onTouchCancel

イベントの設定方法

addEventListenerで設定する。

document.addEventListener("touchstart", touchHandler, false);
document.addEventListener("touchmove", touchHandler, false);
document.addEventListener("touchend", touchHandler, false);
document.addEventListener("touchcancel", touchHandler, false);

タッチした数は配列で取得できる。

event.touches.lengthでタッチした数が取得できる。
ダブルクリックやマルチタッチの処理はこれで判別する。
それぞれのタッチした座標を取得したい場合はevent.touches[i].pageX、event.touches[i].pageYで取得できる。

iPhoneサイト制作ハンドブック iPhone&iPod touch対応