使用 jquery.hammer.js 时如何返回 X 和 Y 坐标答案

【问题标题】：How to return X and Y coordinates when using jquery.hammer.js使用 jquery.hammer.js 时如何返回 X 和 Y 坐标
【发布时间】：2013-06-27 19:22:26
【问题描述】：

我正在使用 jquery.hammer.js 编写一个小页面，但在获取触摸事件的 x 和 y 坐标时遇到问题。

我的代码如下：

var x1, y1;
var element = document.getElementById("myDIV")
$(element).hammer().on("touch", function(e){
x1 = e.clientX
y1 = e.clientY

document.getElementById("resultDIV").innerHTML = x1 + " " + y1
}

但我得到的结果是“未定义未定义”。

我有我能想到的一切，非常感谢任何帮助。

【问题讨论】：

试试 e.target.clientX，因为 e 甚至不是元素，而 event.tartget 返回事件发生的元素。 github.com/EightMedia/hammer.js/wiki/Getting-Started 并搜索“事件数据”，你会找到 even 的所有属性
@AmitChotaliya 谢谢，但这也不起作用。我也看到了这篇帖子link，但也没有任何帮助
@DFania 你找到解决方案了吗？我也遇到了同样的问题。

标签： javascript jquery coordinates hammer.js

【解决方案1】：

e.gesture 现已弃用。使用最新版本的 Hammer.js，您应该使用

var tapX, tapY;
tapX = e.center.x;
tapY = e.center.y;

【讨论】：

仅供参考，这些为您提供页面相关坐标，而不是相对对象。
以及如何获取对象相关坐标？
对于对象相关尝试：e.changedPointers[0].pageX 和 e.changedPointers[0].pageY。
这对我在移动设备上不起作用......它似乎与页面缩放有关，我得到的 x,y 坐标看起来大约是它们的 1/2应该是，但是在 this 的事件结构中的任何地方都有 no 指示（例如，“scale”报告为 1）

【解决方案2】：

最后你错过了);。
尽量在每个 statement 的末尾始终使用分号 (;)。
如果您开始使用某个库，请先阅读文档和操作方法部分。

您可以从documentation on GitHub 找到您想要的信息。

更新：
我分析了event 对象并找到了该对象的gesture 属性。 gesture 包含另一个属性，称为center。最后，您可以使用pageX 和pageY 从此属性中获取X 和Y 坐标。

var x1, y1;
x1 = e.gesture.center.pageX;
y1 = e.gesture.center.pageY;

这是您在JSFiddle 中的示例的工作演示。

如果你使用multi-touch，你可以使用gesture属性的touches数组来获取每次触摸的坐标。其他属性名称保持不变 (pageX, pageY)。

var x1, y1;
x1 = e.gesture.touches[0].pageX;
y1 = e.gesture.touches[0].pageY;

这是您的示例中的 second demo，使用 touches 数组仅获取第一次触摸的坐标。

【讨论】：

【解决方案3】：

我需要调查原始事件才能让我的工作正常进行。这是其他有类似情况的人的示例。

$("#id").hammer({ domEvents: true }).on("press", ".elems", function (e) {
    console.log("pressed");
    console.log(e.originalEvent.gesture.center.x);
    console.log(e.originalEvent.gesture.center.y);
    return false;
});

锤子版Hammer.JS - v2.0.4 - 2014-09-28

【讨论】：

【解决方案4】：

在hammerjs中2.0.8我使用ev.srcEvent.offsetX和ev.srcEvent.offsetY

【讨论】：