获取当前元素的touchstart坐标

Question

所以我有一个看起来像这样的元素：

 ____________________________________
/                                    \
|                                    |
|                                    |
+------------------------------------+
|                                    |
|                                    |
|                                    |
+------------------------------------+
|                                    |
|                                    |
\____________________________________/

我给它附加了一个touchstart监听器，如下所示：

    other_options.addEventListener('touchstart', function(e) {
        event.preventDefault();
    }, false);

我想要做的是，我已经查看了'e‘的值，但我找不到任何足够一致的值(当我尝试它们时，值似乎不是正确的)来执行我想要的。

我知道这些行的大小。我只希望能够获取触发touchstart事件的Y坐标，即元素的上坐标为0。这样，Math.floor(y / ROW_SIZE)将给出启动touchstart事件的行。

Answer 1

你必须像这样访问。

e.touches[0].clientX/clientY.

触摸次数和触摸信息可以通过e.touches访问。

看看这个常见问题。

How to get the x/y coordinates in touch events ?

这是触摸事件documentation。

顺便说一下，事件将只返回相对于窗口的x/y坐标。我们无法改变这一点。你能做什么。top= 0 - element.top; x= clientx-top.

Answer 2

最好使用getBoundingClientRect()方法来计算元素的左上角的值。

如果元素在另一个容器中，上面的方法element.top可能不会给出相对于视口的top和left值。

因此，为了计算相对于元素的接触坐标，我们可以这样做。

var rect = element.getBoundingClientRect();
xCoordinate = event.touches[0].clientX - rect.left;
yCoordinate = event.touches[0].clientY - rect.top;

要了解有关getBoundingClientRect()方法的更多信息，请访问click here。