像鼠标事件一样在触摸时检索相同的offsetX

Question

您好我正在尝试获取触摸事件的offsetX,Y,它应该与鼠标事件的offsetX相同.为此,我使用了以下代码:

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

我甚至试图将触摸事件模拟为鼠标事件,但为此目的,我需要offsetX/Y,这在触摸事件中是不可用的.是否有任何方法可以计算offsetX/Y的触摸？请帮忙

Answer 1

我用这个

var rect = e.target.getBoundingClientRect();
var x = e.targetTouches[0].pageX - rect.left;
var y = e.targetTouches[0].pageY - rect.top;

Answer 2

在带有滚动功能的网页上，这里的最佳答案对我不起作用！这会更好地工作：

var bcr = e.target.getBoundingClientRect();
var x = e.targetTouches[0].clientX - bcr.x;
var y = e.targetTouches[0].clientY - bcr.y;

我用它来解决我的问题。

Answer 3

您可以使用PointerEvent代替触摸事件，它们具有更多属性。例如：

div.addEventListener('pointermove', console.log);

输出：

isTrusted: true
altKey: false
altitudeAngle: 1.5707963267948966
azimuthAngle: 0
bubbles: true
button: -1
buttons: 1
cancelBubble: false
cancelable: true
clientX: 203
clientY: 483
composed: true
ctrlKey: false
currentTarget: null
defaultPrevented: false
detail: 0
eventPhase: 0
fromElement: null
height: 23
isPrimary: true
layerX: 203
layerY: 177
metaKey: false
movementX: 0
movementY: -1
offsetX: 203
offsetY: 177.6875
pageX: 203
pageY: 483
pointerId: 9
pointerType: "touch"
pressure: 1
relatedTarget: null
returnValue: true
screenX: 734
screenY: 621
shiftKey: false
sourceCapabilities: null
tangentialPressure: 0
tiltX: 0
tiltY: 0
toElement: null
twist: 0
type: "pointermove"
which: 0
width: 23
x: 203
y: 483
[[Prototype]]: PointerEvent

使用示例：MDN：捏缩放手势

Answer 4

我知道这是一个老问题，但在“offsetX 触摸事件”的 google 中是第一个。经过研究，我最终使用了这样的东西。

function getOffsetPosition(evt, parent){
    var position = {
        x: (evt.targetTouches) ? evt.targetTouches[0].pageX : evt.clientX,
        y: (evt.targetTouches) ? evt.targetTouches[0].pageY : evt.clientY
    };

    while(parent.offsetParent){
        position.x -= parent.offsetLeft - parent.scrollLeft;
        position.y -= parent.offsetTop - parent.scrollTop;

        parent = parent.offsetParent;
    }

    return position;
}

Answer 5

如果页面上有滚动，则应该使用鼠标事件的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