javascript - 缩放视口(viewport)时如何从指针事件获得与触摸事件相同的坐标？

Question

我尝试使用指针事件(例如 pointerdown)而不是组合触摸(例如 touchstart)和鼠标(例如 mousedown)事件计算出输入事件坐标。

var bodyElement = document.body;

bodyElement.addEventListener("touchstart", function(e) {console.log("touch: " + e.changedTouches[0].clientX + " " + e.changedTouches[0].clientY);});
bodyElement.addEventListener("pointerdown", function(e) {console.log("point: " + e.clientX + " " + e.clientY);});

在视口(viewport)缩放之前一切正常(例如，android chrome 缩放网页，chrome 开发工具中的设备工具栏缩放系数不是 100%，...)。然后指针事件开始报告完全错误的值。

您可以在以下屏幕截图中观察到错误:

1) viewport 缩放到 100%，300px*300px div 点击到右下角:

2) viewport 缩放到 150%，300px*300px div 点击到右下角:

你们知道如何从指针事件中获取正确的坐标吗？

编辑:
添加了 jsfiddle:jsfiddle

Answer 1

以 div 为目标，而不是可能会改变实际 div 方向的“相对”主体。

试试这个:

const dostuffwithdiv = () =>{
  var u = document.getElementById('uniqueDiv');

  u.addEventListener("touchstart", e=> {
    var rect = e.target.getBoundingClientRect();
    var x = e.targetTouches[0].pageX - rect.left;
    var y = e.targetTouches[0].pageY - rect.top;
    var msg = `touch: ${x} ${y}`;
    console.log(msg);
  });
  u.addEventListener("pointerdown", e=> {
    var rect = e.target.getBoundingClientRect();
    var x = e.clientX - rect.left;
    var y = e.clientY - rect.top;
    var msg = `point: ${x} ${y}`;
    console.log(msg);
  });
}

document.onreadystatechange = dostuffwithdiv(); //since this is jsfiddle this will work
//but on a real frontend you'd want to do something more like this:
//document.addEventListener("DOMContentLoaded", dostuffwithdiv);

这是一个 fiddle ，尽管它的最底部正在监听不同的事件，但由于 jsfiddle 的内部工作方式，我不得不更改最后一行。我希望这是有道理的，如果它不只是问的话。

https://jsfiddle.net/L3tbsyax/42/