javascript - touchevent在手机浏览器中的相对位置

Question

我在获取触摸事件相对于发生它的 html 元素的相对位置时遇到了问题。我知道，这可能被问了一百万次。但我为此苦苦挣扎了好几天，并查看了许多解决方案。

奇怪的是，在我测试过的所有桌面浏览器上，它都有效，但在移动浏览器上却没有。

我在桌面上测试过

• 歌剧
• Chrome
• 火狐

在手机上

• HTC One X (4.1) Chrome
• Samsung Note 10.1 (4.1) Stock 浏览器
• 三星 Note 10.1 (4.1) Chrome
• Nexus 7 (4.2) Chrome

这是一个jsfiddle用我的代码。

问题似乎是，如果捕获事件的 Canvas 在滚动区域内，则 offsetParent 元素的 scrollTop 属性设置为 0 在移动浏览器上，它在桌面浏览器上具有适当的值。

那么这是一个已知错误吗？还是我在这里监督了什么？更重要的是，是否有解决方法或其他方法来实现我的目标？

这是我的一些代码，我如何计算相对位置:

getRelativePosition: function (element, event ) {
var position = { x : event.pageX, y : event.pageY };

do {

  this.log(element.offsetTop);
  this.log(element.offsetHeight);


  position.x -= element.offsetLeft;
  position.y -= element.offsetTop;

  position.x += element.scrollLeft;
  position.y += element.scrollTop;

} while(element = element.offsetParent);

return position;
}

Answer 1

这个问题可能是因为 Enyo 使用 CSS 3D 转换来改进某些平台上的滚动。有一个名为 getAbsoluteBounds 的新实用函数被放入核心以计算相对位置。

您可能会检查它是否可以处理您的情况。简单看一下，我不确定它与您的有什么不同。如果没有，您可能想要在其上归档 Jira。