jquery - jquery-mobileでタップイベントの位置/座標を取得するには?

Question

Jquery-mobile は次のイベントをサポートしています。

http://jquerymobile.com/demos/1.0a3/docs/api/events.html

モバイル デバイスでタップ イベントの位置 (画像内など) を取得するにはどうすればよいですか?

$('#myimg').bind('tap', function(e){
  var x = ???;
  var y = ???;

  alert([x, y]);
})

Answer 1

pageXとpageYが取得されない理由は、座標情報を含まないtouchcancelイベントを取得するためです（結局のところ、これは非タッチです）。これは実際のタップやクリックではなく、（しきい値を超えて）移動せず、十分に高速なタッチイベントです。

jQuery用のtouchswipeプラグインを使用しているときに同じことが発生し、座標を抽出できるように、touchstartイベントに座標を保存し、cancelイベントで取得することで回避する必要がありました。

これらを開始イベント（jquery mobileの「vmousedown」）に保存する必要があります。

  event.touches[0].pageX
  event.touches[0].pageY

window.devicePixelRatioまた、モバイルデバイスでは、画面上の正確な位置を取得するために、座標にを掛ける必要があります。

Answer 2

Jqueryモバイルについては知りませんが、iPhoneで取得したキャンバスデモページを試してみました...クリックして円を描くだけで問題なく動作します。

上記の人々が言っ​​たように、私はちょうど e.pageX と e.pageY を使用します

function getCursorPosition(e) {
    var x;
    var y;
    if (e.pageX != undefined && e.pageY != undefined) {
    x = e.pageX;
    y = e.pageY;
    }
    else {
    x = e.clientX + document.body.scrollLeft +
            document.documentElement.scrollLeft;
    y = e.clientY + document.body.scrollTop +
            document.documentElement.scrollTop;
    }
    x -= Ccanvas.offsetLeft;
    y -= Ccanvas.offsetTop;

    var Point = {
        x: x,
        y: y
        };
    return Point;
}