当父对象/实体具有缩放变换时,获取元素上的接触位置

我需要从移动中的元素的左边框获取精确的鼠标/触摸位置。

问题是,我的身体缩小了 transform:scale() 取决于窗口/设备大小。

这个 touch- 和 mouse-events x , pageX 和 clientX 与元素相关的属性值 offsetLeft 属性是错误的,因为缩放,所以我不能使用它们进行减法并获得正确的位置。

具有 鼠标事件 我只是用 offsetX 性能良好。

问题是,没有 抵销额X 具有的属性 touch-events .

我做了一些研究发现 this issue 哪里 pointer-events 已提到。

我从没听说过 pointer-events 之前,我很开心,因为我认为这会解决我的问题。

但这给我指出了一个新问题。 pointer events safari和ios中不支持。

由于该应用程序首先是为ipad设计的,这是一个大问题。

所以现在我要找一个 抵销额X -就像我可以使用的财产,但没有。

我知道我可以乘,例如 触摸事件 第X页 通过反转比例,但如果我更改样式中的比例,这将中断,因此无法使用此技术。

//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 您可以在哪里玩(在移动和桌面之间切换开发工具/调整大小以进行缩放)。

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

非常感谢您的帮助。