プログラム言語Javascriptでスマートフォンのタップやフリックなどタッチ入力を処理したいためタッチイベントについて調べて見ました。
タッチ処理にはマウスイベントに似ているタップイベントと、回転や拡大縮小時につかえるジェスチャーイベントの２種類がありるようです。ただし簡単なタッチ判定しかしてないのでフリック・タッチホールド・ダブルタップ・ピンチなどの処理は自分で実装する必要がありそうです。（調べた限りでは）
タップイベント
タップイベントには「ntouchstart」「ontouchend」「ontouchmove」の３つある
マウスイベントと比較すると
・onMouseDown = ontouchstart
・onMouseUp = ontouchend
・onMouseMove = ontouchmove
・onMouseOut = ontouchcancel (よくわからない)
に対応する。マウスでダブルクリック(onDblClick)イベントがあるが、タップには無いようだ。
座標の取得は、
・clientX と clientY・・対象の画像などを基準にした座標
・screenX と screenY・・表示している画面を基準にした座標
・pageX と pageY・・表示してない部分も含めた全体を基準にした座標
複数の指の座標を取得する場合は
event.touches[0].pageX;
event.touches[1].pageX;
event.touches[2].pageX
てな感じで、配列に指を触れた順番で格納されている。
ジェスチャーイベント
ジェスチャーイベントは「ongesturestart」「ongesturechange」「ongestureend」の３つ。
・ongesturestart = ジェスチャー開始
・ongesturechange = ジェスチャー処理中
・ongestureend = ジェスチャー終了
取得できる情報は
・scale = ピンチイン・ピンチアウト時の倍率
・rotation = 回転時の角度
と座標も取得できる
注意点
Javascriptでタップ操作する場合は、OSが持っているデフォルトのタップ処理をキャンセルしないと画面がスクロールや拡大縮小しますのでタッチイベント開始時に「event.preventDefault();」を実行すると抑制されます。
onMouseUpでは終了時のマウス座標を取得できるが、ontouchendではタッチ座標を拾えない(end時にはタッチしてないため)、必要な場合はontouchstartやontouchendイベント時に座標を格納して利用する必要がある。
ontouchstartよりontouchendで処理した方が反応が良いとの事、ontouchstartはダブルタップの確認を