前回のフリックイベント続きとして記載。
touchstartでX座標開始位置を保存して、指をスライドさせて放した時点の
touchmoveイベントでX座標終了時点を取得します。
その距離によってフリックを判定します。
------------------------------------------------------------------------------------
// スクリーンに最初にタッチした場合に発生するイベント。
if (e.type == "touchstart") {
touching = true; // フリックイベント有効フラグON
if (e.touches.length == 1) {
var touch = e.touches[0];
// 開始横座標を取得
oX = touch.pageX;
// 終了横座標を０に設定
nX = 0;
scrollX = 0;
}
}
// スクリーンに触れている指をスライドさせた場合に発生するイベント。
else if (e.type == "touchmove") {
if (e.touches.length == 1) {
// タッチイベントを取得
touch = e.touches[0];
// 終了横座標を取得
var nX = touch.pageX;
// 指が左→右に移動した場合
if (oX < nX) {
// スクロールされた横座標の距離
var scrollX = nX-oX;
// スクロールされた座標の距離は200ピクセル以上の場合、
// フリックに認識される
if (scrollX > 200) {
// フリック中にキャンセルイベントが発生してないか？
if (touching == true){
touching = false; // フリックイベント有効フラグOFF
/*** ページ遷移処理 ***/
・
・
・
}
}
// 指が右→左に移動した場合
} else {
// スクロールされた横座標の距離
scrollX = oX-nX;
// スクロールされた座標の距離は200ピクセル以上の場合、
// フリックに認識される
if (scrollX > 200) {
// フリック中にキャンセルイベントが判断してないか？
if (touching == true) {
touching = false; // フリックイベント有効フラグOFF
・
・
・
}
}
}
}
}
//フリックやスクロール中にキャンセルイベントが発生した場合。
else if (e.type == "touchend" || e.type == "touchcancel") {
// タッチイベント終了に設定する
touching = false;
}
タッチパネルだといろんな操作があるので判定が難しいですね
参考URLを教えまーす
http://mydailyphoto.com/blog/iphone-safari-flick-navigation/
/*** ページ遷移処理 ***/