Androidブラウザでフリックを実装する時の注意

iPhone/Android/PC 対応。jQuery で書くタッチイベント

画面を一定の距離ドラッグしてフリックを発生させようとしたとき。以下のソースでは上手くいかなかった。

var startX,endX;
$(window).load(function(){
    document.addEventListener("touchstart", start, false);
    document.addEventListener("touchmove", move, false);
    document.addEventListener("touchend", end, false);
    //タッチ
    function start(event) {
        startX = event.touches[0].pageX;
    }
    //移動(ドラッグ)
    function move(event) {
        endX = event.touches[0].pageX;
    }
    //移動終了
    function end(event) {
        //touchendでは座標は取れない
        //よってここでは直前tocchmoveの座標を使う
    }

});

上記参考サイトも参考にするとAndroidではtouchmoveイベントででは
event.preventDefault();
がないと上手くいかなかったのでmove関数を以下に修正。

function move(event) {
    event.preventDefault();
    endX = event.touches[0].pageX;
}

とりあえず動くようになりました。尚自身の所有するGalaxyTabとINFORBARで検証はしました。
(Android OS 2.3)

[`evernote` not found]
[`yahoo` not found]