使用辅助监视器时，如何在 window.onmousemove 上获取相对于主机屏幕的 e.screenX/Y？

Question

我以为这很容易，但事实证明并非如此。

采取以下情况：底部有一个主桌面，而该主桌面上方有一个辅助桌面。

目标是获取鼠标 X 和 Y 相对于在辅助桌面上托管窗口的屏幕的位置。天真的方法是：

const onMouseMove = e => {
  const hostScreenX = e.screenX;
  const hostScreenY = e.screenY;

  document.body.innerHTML = `${hostScreenX}x${hostScreenY}`;
};

window.addEventListener("mousemove", onMouseMove, false);

事实证明，screenY当在辅助屏幕（顶部）上运行时，这会返回一个负数。主屏幕被视为“零边界”，之前的所有内容都在负空间中。

我们可以使用screen.availTopand来解决这个问题screen.availLeft：

const onMouseMove = e => {
  const hostScreenX = e.screenX - window.screen.availLeft;
  const hostScreenY = e.screenY - window.screen.availTop;

  document.body.innerHTML = `${hostScreenX}x${hostScreenY}`;
};

window.addEventListener("mousemove", onMouseMove, false);

好多了，除了它实际上是不正确的：因为availTop空间包括永久操作系统UI的空间（在MacOS上是工具栏，在Windows上是工具栏，如果你把工具栏从默认的底部移到顶部），我们错误地减去工具栏空间。

例如，在 chrome 中的 MacOS 上，当将鼠标移动到最顶端时，这会给我们hostScreenY80，而它应该是 103（macos 工具栏是 23 像素）。

然后你可能会认为我们可以通过加回高度差 -availHeight 来解决这个问题：

const onMouseMove = e => {
  const hostScreenX = e.screenX - window.screen.availLeft + (window.screen.width - window.screen.availWidth);
  const hostScreenY = e.screenY - window.screen.availTop + (window.screen.height - window.screen.availHeight);

  document.body.innerHTML = `${hostScreenX}x${hostScreenY}`;
};

window.addEventListener("mousemove", onMouseMove, false);

事实上，这在 MacOS 上似乎是完美的。

问题在于，这假设操作系统的工具栏位于屏幕顶部，这在 Windows 上通常不是这样（尽管有时如果您将工具栏移到顶部）。因此，这些值会被工具栏空间偏移。

当在 Javascript 中的 mousemove 事件上使用二级（甚至三级）监视器时，我们如何获得相对于托管当前窗口的屏幕的 screenX 和 screenY？

Answer 1

该解决方案适合您的要求吗？

它还可以与第一个显示器左侧的第二个显示器配合使用，操作系统的工具栏位于第一个显示器的右侧。

const onMouseMove = e => {
  const { screen } = window;
  const { availLeft, availTop } = screen;
  const hostScreenX=e.screenX-availLeft+ (availLeft ? (screen.width - screen.availWidth) : 0);
  const hostScreenY=e.screenY-availTop+ (availTop ? (screen.height - screen.availHeight) : 0);

  document.body.innerHTML = `${devicePixelRatio} ${hostScreenX}x${hostScreenY} ` +
    `${hostScreenX * devicePixelRatio}x${hostScreenY * devicePixelRatio}`;
};

window.addEventListener("mousemove", onMouseMove, false);

聚苯乙烯

我只有一台 Windows 10 PC，我只能在我的平台上进行测试

编辑：如果我们需要实际屏幕分辨率的坐标，我们可以使用devicePixelRatio多人游戏。问题是devicePixelRatio屏幕之间可能会发生变化。如果我们只需要知道鼠标指针位于托管窗口的屏幕上的坐标，没问题；如果我们需要继续获取其他屏幕上的坐标，场景中就会出现许多其他问题。如果确实需要，我建议在将来的编辑中讨论它们。