jQuery（スワイプとタッチ）pageXとpageYは0を返し続けます

Question

私のiPhoneでtouchstartとtouchendイベントで遊んでいます。 divを持つサンプルページを作成しました。そのページに触れてページをスクロールすると、開始位置と終了位置のy座標が返されるはずです。

リンク：http://jsbin.com/ibemom/2

jQueryの：私は私のiPhone上でそのページをロードすると

var touchStartPos; 

$('.theDiv') 
    .bind('touchstart', function(e){ 
    touchStartPos = e.pageY; 
    }) 
    .bind('touchend', function(e){ 
    alert(touchStartPos + ' | ' + e.pageY) 
    }) 

、しかし、警告はゼロとして両方の値を報告し続けます。私の持つものに誰かが間違っていると思う？それが出て立ち往生からhttps://github.com/jquery/jquery-mobile/issues/734

コメントそれを：：

は

UPDATE：私はjQueryのモバイルプロジェクトにコードのこのビットに出くわし

は

// (in iOS event.pageX and event.pageY are always 0) 

それは理由を言っていません。その場合ですが、少なくとも私は同じことを見ている他の人を見つけました。そのページのサンプルコードを調べて、解決策があるかどうかを確認します。

UPDATE II：

さて、上記のリンクのサンプルコードを見た後、それが実際の値を返します。次のようになります。

e.originalEvent.touches[0].pageY 

キャッチがあり、私は今、それはありません実現かなり必要です。これは、ブラウザウィンドウではなく、HTMLドキュメントに関連するイベントにイベントをアタッチしたオブジェクト内で触った領域のYオフセットを返します。

私の目標は、タッチがどこで始まったのか、どこで終わったのかを把握し、値を比較することです。彼らがかなり違っている場合は、タッチではなくスワイプが実行されたとお考えください。

UPDATE III：

私はまた、これらの例への参照を見つけることだ：

e.originalEvent.touches[0].pageX 

event.targetTouches[0].pageY 

私はそれらのいずれかの仕事を得るように見えることはできませんが。どちらも未定義のエラーを返します。

のUPDATE IV：

一つの解決策は、ドキュメント自体に）（オフセットを追跡することであるように見えます。私は文書にtouchendイベントを適用してからオフセットをチェックできます。

この問題は、私のtouchendイベントが最初にページの要素でトリガーされ、次にそれがドキュメント上で発火する（バブリング）ことが問題です。だから私は実際にそれがタッチまたはスワイプであるかどうかを判断することができません。なぜなら、私はオブジェクトのイベントに何をすべきかを理解する必要があります。それでも...

Answer 1

を、このいずれかを熟考

[OK]を素早く答えは、指が画面（touchend）を離れたとき、あなたがタッチを検出することができないです。この問題を回避するために今http://jsfiddle.net/Y4fHD/

：

私の最初の例では、その証明しています。または、あなたが望むものと呼んでください。タッチにがあるため、touchendイベントでは検出されないかもしれません。

バインドtouchmoveイベントのハンドラ：その後、http://jsfiddle.net/Y4fHD/1/

var endCoords = {}; 
$(document.body).bind("touchmove", function(event) { 
    endCoords = event.originalEvent.targetTouches[0]; 
}); 

そして、ちょうどあなたのデバイスをタップする

$(document.body).bind("touchend", function(event) { 
    $('p').text("Your end coords is: x: " + endCoords.pageX + ", y: " + endCoords.pageY); 
}); 

[OK]を試し、最後のタッチを確定するために、変数endCoordsを使用！それでもエラーは解決します：なぜですか？あなたはあなたの感動を動かさなかったからです。

touchstartで、私たちのすべての準備ができて、私たちがあるendCoords変数を定義した場合：http://jsfiddle.net/Y4fHD/2/

var endCoords = {}; 
$(document.body).bind("touchstart touchmove", function(event) { 
    endCoords = event.originalEvent.targetTouches[0]; 
}); 

そして最後のタッチ

$(document.body).bind("touchend", function(event) { 
    $('p').text("Your end coords is: x: " + endCoords.pageX + ", y: " + endCoords.pageY); 
}); 

を確定するために、変数endCoordsを使用するには今すぐあなたをタップしてみてくださいデバイス！変数を作成します：：となります

いくつかの最終的なノートstartCoordsとendCoordsが、その後touchendイベントでこれらを使用します。http://jsfiddle.net/Y4fHD/3/

var startCoords = {}, endCoords = {}; 
$(document.body).bind("touchstart", function(event) { 
    startCoords = endCoords = event.originalEvent.targetTouches[0]; 
}); 
$(document.body).bind("touchmove", function(event) { 
    endCoords = event.originalEvent.targetTouches[0]; 
}); 
$(document.body).bind("touchend", function(event) { 
    $('p').text("Your touch on the axis: " + Math.abs(startCoords.pageX-endCoords.pageX) + "x, " + Math.abs(startCoords.pageY-endCoords.pageY) + "y"); 
}); 

注：上記の例の どれがテストされていない
、それが動作を期待しています！
Math.abs数などの絶対値が私に与えます：-5はここ5

Answer 2

なり私のためにどのような作品です....

$('.someClass').bind('touchmove',function(e){ 
    e.preventDefault(); 
    var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]; 
    var elm = $(this).offset(); 
    var x = touch.pageX - elm.left; 
    var y = touch.pageY - elm.top; 
    if(x < $(this).width() && x > 0){ 
     if(y < $(this).height() && y > 0){ 
       //your code here 
     } 
    } 
}); 

Answer 3

コードの単純化された作品は、私はスワイプ検出するために使用していますがあります私はMobiOneバージョン2.0.0M2テストセンターソフトウェアを使用する場合の方法によって、それは私が期待されていたとしてtouchend pageX値を入れていたので、それが聞こえる：.myelementためのジェスチャー、元にはスライダーギャラリー

$(function() { 
    var diff, tchs, del = 150, 
    clk = function(el){ 
     if (typeof(tchs) !== 'object') return; //we have nothing to do 
     if ((diff - tchs[tchs.length - 1].pageX) < 0) { //swipe right 

     } 
     else if ((diff - tchs[tchs.length - 1].pageX) > 0) { //swipe left 

     } 
    }; 
    $('.myelement').bind('touchstart touchmove', function(ev){ 
      var oev = ev.originalEvent, el = $(this); 
      switch(ev.type.charAt(5)){ 
       case 's': //touch start 
        diff = oev.pageX; 
        window.setTimeout(clk, del, el); 
       break; 
       case 'm': //touch move 
        tchs = oev.touches; 
       break; 
      } 
    }); 
}); 

UPDましたバ実際のデバイスにすばやくアクセスすることができない場合、混乱しやすいかもしれません。

UPD2：肯定的なフィードバックに触発されました:)右、左、上、下のスワイプを検出できる複雑なバージョンのビットを実現しましたが、まだ解決する必要があります。

$(function() { 
    var ftch, // first touch cache 
    lck = Math.sin(Math.PI/4); //lock value, sine of 45 deg configurable 

    var defSwipeDir = function (el, tchs) { // need define swaping direction, for better UX 
     if (typeof (tchs) !== 'object') return 0; // check if there was any movements since first touch, if no return 0 
     var ltch = tchs[tchs.length - 1], // last touch object 
      dx = ltch.pageX - ftch.pageX, 
      dy = ltch.pageY - ftch.pageY, 
      hyp = Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2)), 
      sin = dy/hyp, 
      cos = dx/hyp, 
      dir; 

     if (Math.abs(cos) >= lck) { // left or right swape 
      dir = cos > 0 ? 'r' : 'l'; 
     } else { // up or down 
      dir = sin < 0 ? 'u' : 'd'; 
     } 
     el.trigger('swipe', dir); // trigger custom swipe event 
     return dir; // and return direction too 
    } 

    $('.myelementTouchDetection').on('touchstart touchmove swipe', function (ev, d) { 
     var oev = ev.originalEvent, 
      myelementTouchDetection = $(this), 
      dir; // you may know swipes on move event too 

     switch (ev.type) { 
      case 'touchstart': 
       ftch = oev; 
       break; 
      case 'touchmove': 
       dir = defSwipeDir(myelementTouchDetection, oev.touches); 
       return false // cancel default behaiviour 
       break; 
      case 'swipe': 
       switch (d) { 
        case 'r': // swipe right 
         console.log('swipe right'); 
         break; 
        case 'l': // swipe left 
         console.log('swipe left'); 
         break; 
        case 'u': // swipe up 
         console.log('swipe up'); 
         break; 
        case 'd': // swipe down 
         console.log('swipe down'); 
         break; 
       } 
       break; 
     } 
    }) 
}); 

Answer 4

NULLの答えは、上記の、あなたはtouchstart結合機能にendCoordsにstartCoordsを割り当てることができないことを除いて、私のために素晴らしい仕事しました。 endCoordsが更新されるとstartCoordsも更新されるように、同じオブジェクトをポイントします。 touchendイベントが発生すると、startCoordsは常にendCoordsに等しくなります。

以下のコードを更新しました。これはiOS 6.0のSafariを使ったiPad 3で私にとってはうまくいった。数学を修正してエラーを表示し、数学を削除するために編集されました。touchend-bound関数の中でabs（）を使用します。また、touchmove-bound関数内でevent.preventDefault（）を呼び出すと、iOS上のGoogle Chromeでも同様に動作します。

var startCoords = {}, endCoords = {}; 

$(document.body).bind("touchstart", function(event) { 
    endCoords = event.originalEvent.targetTouches[0]; 
    startCoords.pageX = event.originalEvent.targetTouches[0].pageX; 
    startCoords.pageY = event.originalEvent.targetTouches[0].pageY; 
}); 

$(document.body).bind("touchmove", function(event) { 
    event.preventDefault(); 
    endCoords = event.originalEvent.targetTouches[0]; 
}); 

$(document.body).bind("touchend", function(event) { 
    $('p').text("Your touch on the axis: " + (endCoords.pageX-startCoords.pageX) + "x, " + (endCoords.pageY-startCoords.pageY) + "y"); 
});