Question

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

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

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

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

我想做什么，而且我已经看过了＆＃39; e＆＃39;但我找不到任何足够一致的价值（当我尝试它时，价值观似乎对我不合适）来做我想做的事。

我知道那些行的大小。我只想获取touchstart事件触发位置的Y坐标，为元素的上坐标。这样，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()方法计算top＆amp;左边的元素值。

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

因此，要计算相对于元素的触摸坐标，我们可以如下所示。

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

要详细了解getBoundingClientRect()方法，click here。

获取当前元素的touchstart坐标

2 个答案: