web-dev-qa-db-ja.com

Androidデバイス上のJavaScriptでタッチイベントの座標を取得できません

HTML5キャンバスをテストし、JavaScriptを使用してタッチ対応デバイス用に描画しています。 iOSデバイスで動作していますが、Androidで動作させることはできません。座標を返さないevent.pageXに絞り込みましたが、代わりに0を返すか、未定義（ブラウザーに基づく）を返します。

Opera Mobile and DolphinブラウザでCyanogen 7.1を実行している私の電話で、および標準ブラウザを実行しているGalaxy Tab 10.1（Android 3.1）でそれをテストしました。

Event.pageX、event.layerX、event.clientXの座標を表示するtouchstartイベントでアラートを表示するようにコードを変更しました（clientXはiOSでのみ機能するはずです）。

canvas.addEventListener('touchstart', function(e) {
if (readyToDraw){
    alert("PageX: "+e.pageX+","+e.pageY+"\n LayerX: "+e.layerX+","+e.layerY+"\n + clientX: "+e.clientX+","+e.clientY);
    // prevent the browsers default action!
    e.preventDefault();
    Paint = true;
    // Get coordinates
    var c = getCoords(e);
    addClick(c.x, c.y, false);
}
});

IOSで完全な図面が機能しているのですが、座標を登録するためのAndroid

最終編集：問題を解決しました。承認された回答を参照してください。

javascriptandroidtouch-event
30
Stuart Lacy

最終編集：Okうまくいきました。誰かがこれを見つけて同様の問題が発生した場合、イベント内のタッチ配列にアクセスする必要があり、シングルタッチ（マルチタッチではなく）を使用するだけです。 ）以下のように、配列から最初の項目を取り出します。正確でない場合は、オフセットする必要がある場合があります。

var touch = event.touches[0];
var x = touch.pageX;
var y = touch.pageY;
// or taking offset into consideration
var x_2 = touch.pageX - canvas.offsetLeft;
var y_2 = touch.pageY - canvas.offsetTop;
37
Stuart Lacy

（iScroll 5のコンテキストでは）私にはうまくいきませんでした。中古 changedTouches[0]代わりに、 mouse click event.pagex is NaN in mobile chrome browser（v30.0.1599.92） で提案されています。

0
Sebastiaan Ordelman