iPhoneのSafariでtouchendイベントを使うときの注意

iPhone用のドラッグアンドドロップで操作できるWebアプリを作っていて、うっかりはまったtouchendの挙動についてのメモ。

最初に書いたコードはこんな感じでした。

function touchhandler(e) {
    var x = e.touches[0].pageX;
    switch (e.type) {
        case 'touchstart':
            break;
        case 'touchmove':
            break;
        case 'touchend':
            break;
    }
}

document.getElementById('sample').addEventListener("touchend", touchhandler, false);

このプログラムではtouchendの処理が実行されません。

というのもまぁ、気づけば簡単なことなんですが、最後の指をスクリーンから離してtouchendのイベントが発生するときは、もうスクリーンに触ってないのでe.touches[0]がundefinedになるんですね…

なので、touchendのときは、引数で受け取ったe.touchesは注意しましょうという話。

今回参考にさせていただいたのは以下のサイト。

flashcast：フリーで働くITエンジニア集団のブログ: ipod touch用のWeb Applicationを作成してみる（canvasでお絵かき編）

SitePen

Web開発参考サイト – iPhone 3G DevWiki

タグ: iPhone, JavaScript

コメントを残すか、ご自分のサイトからトラックバックすることができます。