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

Question

我正在使用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
}

但我的结果只是“未定义 未定义”。我已经想到了所有可能的情况，非常感谢任何帮助。

- DFania

---

尝试使用e.target.clientX，因为e甚至不是元素，而event.target返回事件发生的元素。 https://github.com/EightMedia/hammer.js/wiki/Getting-Started并搜索“Event Data”，您将找到所有事件的属性。 - bitkot

@AmitChotaliya 谢谢你，但这个也不起作用。我还看到了这篇文章[链接]（http://stackoverflow.com/questions/13416830/jquery-access-x-and-y-coordinates-custom-event），但那里也没有帮助。 - DFania

@DFania，你找到解决方案了吗？我也卡在同样的问题上了。 - Mayank Kataria

Answer 1

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

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

- hudidit

---

这些坐标提供的是页面相关的坐标，而非对象相关的。 - ezwrighter

如何获取对象相关的坐标？ - ZEE

针对对象相关，请尝试使用：e.changedPointers[0].pageX 和 e.changedPointers[0].pageY。 - supernifty

这在我的手机上无法正常工作...似乎与页面缩放有关，我得到的x，y坐标看起来只有应该有的一半左右，但是在事件结构中没有任何指示（例如，“scale”报告为1）。 - Michael

Answer 2

1. 你漏掉了结尾处的);。
2. 每个语句的末尾都要使用分号（;）。
3. 如果你开始使用某个库，请先阅读文档和入门部分。

你可以从GitHub上的文档中找到你想要的信息。

更新：
我已经分析了事件对象，并发现了这个对象的手势属性。 gesture包含另一个称为center的属性。 最后，您可以使用pageX和pageY从此属性获取X和Y坐标。

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

这里是你的示例的工作演示，可在JSFiddle中查看。

如果您使用多点触控，可以通过使用“gesture”属性的“touches”数组来获取每个触摸的坐标。其他属性名称保持不变（“pageX, pageY”）。

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

这是您的示例的第二个演示，涉及it技术并使用touches数组仅获取第一个触摸点的坐标。您可以在此处查看演示。

- Karlen Kishmiryan

Answer 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版本 Hammer.JS - v2.0.4 - 2014-09-28

。

- Robert

Answer 4

在 hammerjs 的版本 2.0.8 中，我使用 ev.srcEvent.offsetX 和 ev.srcEvent.offsetY。

- TmTron