当使用辅助监视器时，如何获得相对于window.onmousemove上主机屏幕的e.creen X/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工具栏上，如果将工具栏从默认底部移到顶部，则在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上似乎是完美的。

问题是，--这假设操作系统的工具栏位于屏幕的顶部，这在上通常是不正确的(尽管有时将工具栏移到顶部时也是如此)。因此，这些值被工具栏空间所抵消。

，当我们在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可能会在屏幕之间发生变化。如果我们只需要知道坐标，直到鼠标指针在屏幕上承载我们的窗口，没有问题；如果我们需要继续获得其他屏幕上的坐标，许多其他问题出现在现场。如果真的需要的话，我建议在以后的编辑中讨论。

Answer 2

根据我的研究，JavaScript目前不可能获得关于屏幕和屏幕大小的不同信息，更不用说macOS菜单栏之类的特定操作系统的位置和/或大小了。

例如，看看用javascript测试多个屏幕，其中最好的想法是做出有根据的猜测。

我尝试了MediaDevices API (mediaDevices.enumerateDevices)，但这并没有显示屏幕设备的信息：

​

​

我担心我们不会在短期内获得这些信息，至少在没有征得用户同意的情况下是这样，因为浏览器供应商会不遗余力地阻止浏览器指纹(请参见amiunique.org的解释)。

如果可以将代码打包为电子应用，则可以访问所有需要的信息( 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扩展中，则可以使用API接口，getInfo()⇾workArea