获取当前元素的touchstart坐标

Question

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

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

我已经附加了一个touchstart监听器,如下所示:

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

我想做什么,而且我已经查看了'e'的值,但我找不到任何足够一致的值(当我尝试它时,值对我来说似乎不对)来做我想要的.

我知道那些行的大小.我只想获取touchstart事件触发位置的Y坐标,为元素的上坐标.这样,Math.floor(y/ROW_SIZE)将为我提供touchstart事件开始的行.

Answer 1

你必须这样访问.

e.touches[0].clientX/clientY.

可以通过e.touches访问号码触摸和触摸信息.

看看这个FAQ.

如何在触摸事件中获取x/y坐标？

这是触摸事件文档.

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

Answer 2

最好使用getBoundingClientRect()方法来计算元素的顶部和左侧值。

element.top如果元素位于另一个容器内，则上述方法可能不会给出相对于视口的顶部和左侧值。

因此，要计算相对于元素的触摸坐标，我们可以执行以下操作。

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

要了解有关getBoundingClientRect()方法的更多信息，请单击此处。