获取当前元素上的touchstart坐标

Question

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

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

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

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

我想做的事情是，我已经查看了“e”的值，但我找不到任何一致的值（当我尝试使用这些值时，它们似乎不正确），以便做我想做的事情。

我知道这些行的大小。我只想能够获取触摸开始事件触发的Y坐标，其中0是元素的上部坐标。这样，Math.floor(y / ROW_SIZE)将给出触摸开始事件所在的行。

- h4lc0n

Answer 1

你需要像这样访问。

e.touches[0].clientX/clientY.

可以通过e.touches来访问触摸点和触摸信息。

看一下这个常见问题解答。

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

这里是触摸事件文档。

顺便提一下，事件返回的x/y坐标只相对于窗口。我们不能改变这一点。但你可以这样做：top= 0 - element.top; x= clientx-top.

- BalaKrishnan웃

---

它给了我一个坐标，但我想要一个相对坐标（意思是当我碰到元素的顶部时y=0，实际上它给了我161，可能是因为边距）。有没有办法我至少可以知道真正的上部位置，这样我就可以减去并在顶部得到0？ - h4lc0n

我会尝试一下，我没怎么用过。 - h4lc0n

好的，这会起作用，http://jsfiddle.net/A6LBz/。我的目标是，当点击红色元素的顶部时，我希望显示“0”，而不是现在因为边距或其他移动元素而显示“100”。顺便感谢您的时间。 - h4lc0n

哦，我没有说过这个，但我希望能够在不知道元素距离顶部95像素的情况下做到这一点（否则我将硬编码为-95）。 - h4lc0n

那么没有办法自动完成吗？我所做的示例是固定的，因此-95很容易，但是具有动态元素可能会真正破坏这种方法。 - h4lc0n

Answer 2

使用getBoundingClientRect()方法计算元素的上部和左侧值更好。

上述方法element.top如果元素在另一个容器内，可能无法提供相对于视口的上部和左侧值。

因此，为了计算相对于该元素的触摸坐标，我们可以按照以下方式进行操作。

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

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

- Venkat