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

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

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 4

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

如果使用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 6

贷记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];
}

Answer 7

我用这个：

const {x, y, width, height} = e.target.getBoundingClientRect();
const offsetX = (e.touches[0].clientX-x)/width*e.target.offsetWidth;
const offsetY = (e.touches[0].clientY-y)/height*e.target.offsetHeight;

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

7 个答案: