javascript - TouchEvent/MouseEvent 在 div 中的局部位置

Question

我一直在开发一个 HTML5 应用程序，现在我面临着一个相当困难的问题，即在适当的坐标系中在目标 div 内获得适当的本地触摸/鼠标位置。

StackOverflow 上有很多解决方案，但事情并不那么容易。

“经典”解决方案是计算目标偏移量并将其从 pageX 和 pageY 位置中减去。许多人使用 JQuery offset 函数，但我们发现它在 iOS 上存在错误 (1.8.3)，在某些情况下，当页面滚动并包含嵌套的缩放 div 时。

情况更加复杂，因为不仅有嵌套的缩放 div(CSS zoom 属性)，还有具有不同 CSS 转换(x 和 y 转换)的图层。

最后，我们编写了自己的函数来计算目标 div 中的本地鼠标/触摸位置(使用 WebKitCSSMatrix、MSCSSMatrix 和其他...)。它“几乎”很好地工作，但在某些情况下仍然不完美 - 特别是当有嵌套的缩放 div 时。

所以我的问题是，考虑到上述要求，是否有一些通用的解决方案/库来计算目标 div 内的本地触摸/鼠标位置？

谢谢。

祝大家今天愉快...

Answer 1

在鼠标事件上，您将有 5 个属性对可供选择。

这是一个很好的 browser quirks reference这解释了差异:

这是他们详细介绍的 3 个

• pageX/Y 以 CSS 像素给出相对于元素的坐标。
• clientX/Y 以 CSS 像素为单位给出相对于视口(viewport)的坐标。
• screenX/Y 以设备像素为单位给出相对于屏幕的坐标。