Coder's Note

iPhone/iPadでタッチイベント発生時のいろいろな情報を取得する

iPhone/iPadでのタッチイベントを使ったときに、指が画面上のどこにあるのか？なども知りたいと思います。

取得できる情報

タッチイベント時に取得できる情報はtouches/targetTouches/changedTouchesの3つのリストがあります。

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

それぞれのリストからは以下の情報が取得できます。配列形式になっているので、インデックスを指定するとそれぞれの指の情報が取得できます。

clientX / clientY
クライアント領域（viewport）上の座標
screenX / screenY
画面の表示領域上の座標
pageX / pageY
ページ全体（スクロールする領域も含む）の座標
target
タッチイベントが発生したときのノード
identifier
それぞれのタッチに対するユニークな値

例えば、1本目の指のページ上のX座標を取得するにはこんな感じ。

event.touches[0].pageX;

デモ

iPhoneまたはiPadをお持ちの方は実際に動くサンプルを作ってみましたので実機で確認してみてください。

JavaScript

// イベント登録
document.addEventListener('touchstart', touchHandler, false);
document.addEventListener('touchmove', touchHandler, false);
document.addEventListener('touchend', touchHandler, false);

function touchHandler(event)
{
    // 指の本数
    var fingers = event.touches.length;
    $('.fingers').html(fingers); // jQuery使いました

    // 各指の情報を取得
    for (var i=0; i<5; i++) {

        var x = event.touches[i] ? event.touches[i].screenX : "";
        var y = event.touches[i] ? event.touches[i].screenY : "";

        $('#screenx_' + i).html(x); // jQuery使いました
        $('#screeny_' + i).html(y); // jQuery使いました
    }

    // 縦スクロールを停止
    event.preventDefault();
}