30

こんにちは、マウスイベントのoffsetXと同じはずのタッチイベントのoffsetX、Yを取得しようとしています。そのために、次のコードを使用しました。

 ev.offsetX = ev.targetTouches[0].pageX- canvasName.offsetLeft

タッチイベントをマウスイベントにシミュレートしようとさえしましたが、その目的のために、タッチイベントでは利用できないoffsetX / Yが必要です。タッチのオフセットX/Yを計算する方法はありますか? 助けてください

4

8 に答える 8

36

私はこれを使います

var rect = e.target.getBoundingClientRect();
var x = e.targetTouches[0].pageX - rect.left;
var y = e.targetTouches[0].pageY - rect.top;
于 2015-11-17T12:16:43.680 に答える
1

https://stackoverflow.com/a/11396681/1997890へのクレジット

function recoverOffsetValues(e) {
    var rect = e.target.getBoundingClientRect();
    var bodyRect = document.body.getBoundingClientRect();
    var x = e.originalEvent.changedTouches[0].pageX - (rect.left - bodyRect.left);
    var y = e.originalEvent.changedTouches[0].pageY - (rect.top - bodyRect.top);

    return [x, y];
}
于 2019-02-03T16:25:53.577 に答える
1

jQuery touchend イベントを使用している場合、layerX および layerY 属性は相対的な x および y を提供しますが、変換は考慮されません。そのため、css から変換スケール値を取得して手動で変換を適用しました。

e = jQuery からの touchend イベント

parent = 「変換」が適用される親要素の jQuery オブジェクト。私にとってはそうでした$(e.target.parentNode);

const layerX = e.originalEvent.layerX;
const layerY = e.originalEvent.layerY;
const currentScale = 1 / parseFloat(parent.css('transform').match(/-?[\d\.]+/g)[0]);

const offsetX = layerX * currentScale;
const offsetY = layerY * currentScale;

最後の 2 行をタッチ イベントとクリック イベントに対応させるには:

const offsetX = e.offsetX || layerX * currentScaleX;
const offsetY = e.offsetY || layerY * currentScaleY;

変換値を 取得するための参照: jquery を使用して変換の css 値を直接取得する

Reactjs を使用している場合はonClick、layerX と layerY の値を次のように取得できますe.nativeEvent.layerX。何らかの理由で、React タッチ イベントで layerX と layerY を使用できません。React を使用する必要がある場合onTouchEnd:

const rect = e.nativeEvent.target.getBoundingClientRect();       
const layerX = e.changedTouches[0].clientX - rect.left;
const layerY = e.changedTouches[0].clientY - rect.top;
const currentScale = 1 / parseFloat(parent.css('transform').match(/-?[\d\.]+/g)[0]);
const offsetX = layerX * currentScale;
const offsetY = layerY * currentScale;

注: トランスフォームの値は、j​​Query で取得するよりも Redux に格納することをお勧めします。

于 2017-09-07T22:00:55.907 に答える
1

ページをスクロールする場合は、マウス イベント (または/ ) のclientX/プロパティを使用する必要があります。clientYpageXpageY

あなたの解決策について。を使用して修正できます。getElementById(canvasName).clientX

ev.offsetX = ev.targetTouches[0].pageX - getElementById(canvasName).clientX

canvasName.offsetLeftcanvasName親に対するのオフセットです。したがって、使用したい場合offsetLeftは、次のようにする必要があります

var left = 0,
elem = getElementById(canvasName);

while(elem) {
  left = left + parseInt(elem.offsetLeft);
  elem = elem.offsetParent;         
}

ev.offsetX = ev.targetTouches[0].pageX - left
于 2013-06-16T07:55:24.200 に答える