JavaScriptでスマホのタッチイベントを取得する方法

Pocket

スマホでタッチイベントを取得して、挙動を制御したり、値を取得して、何らかの動作を実行したりすることは、今後増えてくると思います。

そこでJavaScriptを使ったタッチベントの取得方法等を記述します。

document.addEventListener("タッチイベント", touchXXXHandler, false);
function touchXXXHandler(event) {
  //処理を記述
}

タッチイベントについては2種類ある。

1つの指でタッチした場合と、2つの指でタッチした場合がある。

【1つの指】

  • touchstart = 新しくスクリーンに指が触れた時に発生するイベント
  • touchend = スクリーンから指を離した時に発生するイベント
  • touchmove = スクリーンに触れている指をスライドさせた時に発生するイベント
  • touchcancel = システムによってタッチイベントがキャンセルされた時に発生するイベント

【2つの指】

  • gesturestart = 新しくスクリーンに指が触れた時に発生するイベント
  • gestureend = スクリーンから指を離した時に発生するイベント
  • touchmove = スクリーンに触れている指をスライドさせた時に発生するイベント
  • gesturecancel = システムによってタッチイベントがキャンセルされた時に発生するイベント

イベント情報に関してはオブジェクト毎に3つのリストがある。

  • touches = スクリーンに触れている各指の情報
  • targetTouches = 同じノード内で開始された各指の情報
  • changedTouches = イベント発生の元となった指の情報

そしてリストからは以下の情報を取得することができる。

  • clientX = クライアント領域(viewport)に対するX座標
  • clientY = クライアント領域(viewport)に対するY座標
  • screenX = 画面の表示領域に対する指のX座標
  • screenY = 画面の表示領域に対する指のX座標
  • pageX = ページ全体に対する指のX座標
  • pageY = ページ全体に対する指のY座標
  • target = タッチイベントが発生したノード
  • identifier = それぞれのタッチイベントに対する、ユニークな値

下記が取得方法の例です。(1本めの指のX座標を取得する時)

event.touches[0].pageX;

SNSでもご購読できます。

スポンサーリンク

コメントを残す

*