div中的TouchEvent/MouseEvent本地位置

Question

我一直在开发一个HTML5应用程序,现在我面临一个相当困难的问题,在适当的坐标系中在目标div内获得适当的局部触摸/鼠标位置.

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

"经典"解决方案是计算目标偏移量并从pageX和pageY位置减去它.许多人使用JQuery offset函数,但在页面滚动并包含嵌套的缩放div时,我们在iOS上发现它有bug(1.8.3).

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

最后,我们已经写我们自己的函数来计算在目标div的,本地的鼠标/触摸位置(使用WebKitCSSMatrix,MSCSSMatrix等...).它的工作"几乎"很好,但在某些情况下仍然不完美 - 特别是当有嵌套的缩放div时.

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

谢谢.

所有人都过得愉快...

Answer 1

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

这是一个很好的浏览器怪癖参考，解释了其中的差异：

以下是他们详细介绍的 3 个内容

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