javascript - window.screenX/screenY 没有在 chrome 上更新

Question

我创建了这个小测试页，循环打印 window.screenX 和 screenY，它无法更新 chrome 上的值

Version 67.0.3396.79 (Official Build) (64-bit) on mac

(在 Safari 和 FF 上运行良好):

const wrapper = document.getElementById('wrapper');
const wrapperClick = document.getElementById('wrapperClick');

document.body.addEventListener('click',(e) => {
  wrapperClick.innerText = `${ window.screenX }, ${ window.screenY }, ${ window.innerWidth } × ${ window.innerHeight }`;
});

function refreshLoop() {
  window.requestAnimationFrame(() => {
    wrapper.innerText = `${ window.screenX }, ${ window.screenY }, ${ window.innerWidth } × ${ window.innerHeight }, ${ Math.random().toFixed(2) }`;
    
    refreshLoop();
  });
}

refreshLoop();

body {
  margin: 0;
  height: 100vh;
}

#wrapper,
#wrapperClick {
  position: fixed;
  top: 16px;
  left: 16px;
  font-family: monospace;
  font-size: 18px;
  line-height: 20px;
}

#wrapperClick {
  top: 52px;
}

<div id="wrapper"></div>
<div id="wrapperClick"></div>

这是 Chrome 的错误吗？

Answer 1

在 Mac 上的 Chrome 67.0.3396.62 上测试它时，值会正确更新，但只有在您停止调整窗口大小/移动窗口后才会更新，这是当前的行为。

自 2014 年初报告并请求更改以来，一直存在一个问题:

screenX and screenY parameters don't update until you pause dragging

What steps will reproduce the problem?

1. Launch sample app (attached).
2. Drag it around.

Notice that the screenX and screenY only update after you stop moving the mouse. This is inconsistent with the behaviour of the innerWidth and innerHeight which update during resizing.

A much more useful behaviour would be if the screenX and screenY parameters updated during a drag, not just at the end of it.