当 parent/body 具有缩放变换时获取元素上的触摸位置

Question

我需要在移动时从元素的左边框获取准确的 mouse/touch 位置。

问题是，根据 window/device 大小，我的 body 缩小了 transform:scale()。

与元素 offsetLeft [=65] 相关的 touch- 和 mouse-events x、pageX 和 clientX 属性值=] 因为缩放是错误的，所以我不能用它们做减法并得到正确的位置。

对于 mouse-events 我只使用 offsetX 属性 并且它工作正常。

问题是，没有 offsetX 属性 和 touch-events。

我做了一些研究，发现 this issue where pointer-events 被提及。

我以前从未听说过 pointer-events，我很高兴，因为我认为这会解决我的问题。

但这让我想到了一个新问题。 pointer events 在 Safari 和 ios 中不受支持。

因为应用程序是为 ipad 首先设计的，所以这是一个大问题。

所以现在我正在寻找一个 offsetX-like 属性 我可以使用但是有 none.

我知道我可以将 touch-events pageX 乘以倒置比例，但如果我更改样式中的比例，这会中断，因此无法使用此技术。

//no way to do this:
const windowWidth = window.innerWidth 
let scale = 1
if(windowWidth < 1000) {
  scale = 1.55
} else if(windowWidth < 1101) {
  scale = 1.45
} else if(windowWidth < 1201) {
  scale = 1.35
} else if(windowWidth < 1301) {
  scale = 1.25
} else if(windowWidth < 1401) {
  scale = 1.2
} else if(windowWidth < 1501) {
  scale = 1.12
} else if(windowWidth < 1601) {
  scale = 1.06
}

const x = (e.changedTouches ? (e.changedTouches[0].pageX * scale) - this.offsetLeft : e.offsetX)

我创建了一个 demo 供您玩的地方（在移动和 desktop/resize 之间切换开发工具以进行缩放）。

我的解释可能有点混乱，如果有什么不清楚的地方请问我。

不胜感激。

Answer 1

如果只是缩放，通过获取当前应用的变换样式并解析它来获取当前缩放量，然后除以缩放因子。

如果您需要更高级，例如使用旋转或 3D 变换，您可以乘以逆变换矩阵：有关详细信息和代码，请参阅 和随附的 jsfiddle。