13

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

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

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

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

我想做什么，我已经查看了 'e' 的值，但我找不到任何足够一致的值（当我尝试它们时，这些值对我来说似乎不正确）来做我想做的事。

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

4

2 回答 2

17

您必须像这样访问。

e.touches[0].clientX/clientY.

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

看看这个常见问题解答。

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

这是触摸事件文档。

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

于 2013-01-23T13:32:18.890 回答
12

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

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

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

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

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

于 2016-03-01T01:11:11.533 回答