javascript - 使用辅助监视器时，如何在 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.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

根据我的研究，目前无法使用 JavaScript 获取有关屏幕和屏幕大小的差异化信息，更不用说 OS 特定内容(如 macOS 菜单栏)的位置和/或大小。

参见示例 Testing for multiple screens with javascript ，最好的想法是做出有根据的猜测。

我试过 MediaDevices API ( mediaDevices.enumerateDevices )，但这并没有透露有关屏幕设备的信息:



而且我担心我们不会很快得到这些信息，至少在没有征求用户同意的情况下，因为浏览器 vendor 竭尽全力防止浏览器指纹识别(参见 amiunique.org 的解释)。

如果您可以将代码打包为 Electron application您可以访问所有需要的信息with the screen API :

电子 REPL，例如:

$ npx electron --interactive
> const { screen } = require('electron')
undefined
> screen.getAllDisplays()
[
  {
    id: 69733632,
    bounds: { x: 0, y: 0, width: 1440, height: 900 },
    workArea: { x: 0, y: 23, width: 1440, height: 877 },
    accelerometerSupport: 'unknown',
    monochrome: false,
    colorDepth: 30,
    colorSpace: '{primaries:SMPTEST432_1, transfer:IEC61966_2_1, matrix:RGB, range:FULL}',
    depthPerComponent: 10,
    size: { width: 1440, height: 900 },
    workAreaSize: { width: 1440, height: 877 },
    scaleFactor: 2,
    rotation: 0,
    internal: false,
    touchSupport: 'unknown'
  }
]

(我目前没有附加第二个显示器)

与 bounds: { x: 0, y: 0, width: 1440, height: 900 } (和 workArea: ... )您可以计算占据屏幕空间的元素的大小和位置，例如菜单栏、工具栏或停靠栏。

如果您可以将代码打包到 Chrome 扩展程序中，则可以使用
system.display API , getInfo() ⇾ workArea