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

Question

bounty到期在7天内。该问题的答案有资格获得+ 400声望赏金。 Tom想要引起更多关注对此问题。

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

发生以下情况：底部是主桌面，而在该主桌面之上是辅助桌面。

目的是获得鼠标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.availTop和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上，将鼠标移到最上方时，这将给我们hostScreenY为80，而应该为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

我发誓我看到在MDN上明确提到了这一点，但找不到引号-基本上screen坐标是在主显示器的左上角测得的。而且，在主屏幕顶部或左侧的屏幕上确实会出现负值。