像鼠标事件一样在触摸时检索相同的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

我知道这是一个古老的问题，但是谷歌中的第一个“offsetX触摸事件”......在我做了研究之后，我最终使用了这样的东西。

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 3

如果您在页面上滚动，则应使用鼠标事件（或clientX / clientY）的pageX / pageY属性。

至于你的解决方案。它可以通过使用getElementById(canvasName).clientX来纠正

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

canvasName.offsetLeft相对于它的父母而言是canvasName的抵消。因此，如果您想使用offsetLeft，您应该执行以下操作

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

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

ev.offsetX = ev.targetTouches[0].pageX - left

Answer 4

如果您正在使用jQuery touchend事件，则layerX和layerY属性提供相对x和y，但不考虑转换。所以我通过从css中获取变换比例值来手动应用变换。

e =来自jQuery的touchend事件

parent =应用“transform”的父元素的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;

要使最后两行与触摸和单击事件兼容：

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

抓取变换值的参考：Fetch the css value of transform directly using jquery

如果您使用的是Reactjs onClick，那么您可以使用：e.nativeEvent.layerX获取layerX和layerY值。出于某种原因，在反应触摸事件中，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;

注意：最好将变换的值存储在Redux中，而不是使用jQuery抓取它们。

Answer 5

积分兑换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];
}