4

Javascript を使用して SVG 要素にドラッグ/移動アクションを実装しようとしています。次のようなイベント ハンドラを使用しています。

function handleMouseDown(evt) {
            currentX = evt.offsetX;
            currentY = evt.offsetY;
            dX = currentX - Number($(evt.srcElement).attr("x"));
            dY = currentY - Number($(evt.srcElement).attr("y"));
            isDragging = true;
            $info.html("mousedown at " + currentX + ", " + currentY); //feedback for debugging
        }

タッチ デバイスかどうかに応じて、mousedown または touchstart のいずれかを handleMouseDown にポイントするコードが既にあることに注意してください。

私のデスクトップでは、コードは IE9、Google、および Safari で正常に動作します。ただし、iPad では、タッチスタート時に、フィードバックに「未定義、未定義でのマウスダウン」が表示されます。.offsetX と .offsetY を .pageX と .pageY に置き換えると、実際の座標が得られます。そのため、Safari Mobile は .offsetX と .offsetY を処理しないようですが、.pageX と .pageY を処理します。

ソース要素の position.left プロパティを使用して pageX から .offsetX を計算できることはわかっていますが、可能であればこれを避けたいと考えています。私の質問は次のとおりです。私のコードまたはアプローチに何か問題がありますか、それとも .offsetX が Safari Mobile で処理されませんか。

どんな助けでも大歓迎です！

4

2 に答える 2

0

clientX代わりにとを使用できますclientY。

于 2012-10-08T08:59:40.830 に答える
0

要素でjQueryの.on関数を使用してイベントハンドラーをバインドする際に同様の問題がありましcanvasた（理由はわかりません）。

を使用してイベントハンドラーをバインドすることで解決しましたaddEventListener。ハンドラー内のeventオブジェクトには、適切な値で定義された offsetX と offsetY があります。

それが役に立てば幸い...

于 2014-06-06T09:56:35.597 に答える