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

Posted 2021-04-27

我正在使用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.gesture现已弃用。使用最新版本的Hammer.js，您应该使用

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

另一答案

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

您可以从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，你可以使用touches属性的gesture数组获得每次触摸的坐标。其他属性名称保持不变（pageX, pageY）。

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

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

另一答案

我需要调查原始事件以使我的工作。以下是其他具有类似情况的人的示例。

$("#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

另一答案

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