检测浏览器窗口是否使用 JavaScript 移动？答案

【问题标题】：Detecting if the browser window is moved with JavaScript?检测浏览器窗口是否使用 JavaScript 移动？
【发布时间】：2019-05-09 03:08:16
【问题描述】：

这是一个演示......我只是好奇，你能检测到窗口是否被移动了吗？就像您在显示器周围移动 Firefox/Chrome/IE 一样？我对此表示怀疑，但我想看看，因为您可以检查调整大小和焦点/模糊窗口。

【问题讨论】：

标签： javascript windows browser dom-events

【解决方案1】：

我只能想到这个（繁重的）解决方法，您可以在其中检查 window.screenX 和 window.screenY 是否每 x 毫秒更改一次

var oldX = window.screenX,
    oldY = window.screenY;

var interval = setInterval(function(){
  if(oldX != window.screenX || oldY != window.screenY){
    console.log('moved!');
  } else {
    console.log('not moved!');
  }

  oldX = window.screenX;
  oldY = window.screenY;
}, 500);

虽然我不建议这样做——它可能会很慢，而且我不确定是否所有浏览器都支持 screenX 和 screenY

【讨论】：

screenX 和 screenY 在 IE 中不受支持，它们具有相似但不完全等效的 window 属性 screenLeft 和 screenTop。
聪明的破解！从来没想过。
screenX 和 screenY 从 IE9 开始支持 (source)

【解决方案2】：

一个可能更优化的版本是仅在窗口外结合 Harmen 的回答检查窗口移动：

var interval;
window.addEventListener("mouseout", function(evt){ 
  if (evt.toElement === null && evt.relatedTarget === null) {
    //if outside the window...
    if (console) console.log("out");
    interval = setInterval(function () {
      //do something with evt.screenX/evt.screenY
    }, 250);
  } else {
    //if inside the window...
    if (console) console.log("in");
    clearInterval(interval);
  }
});

如果使用 jQuery，它可能会在这种情况下标准化 screenX/Y，因此值得对其进行一些测试。 Jquery 将使用这种格式而不是 addEventListener:

$(window).on('mouseout', function () {});

如果您在 Windows 操作系统中通过 alt + Space 移动窗口，并发现窗口调整大小被忽略，我建议通过 @ 添加额外级别的检测987654324@ 事件。

【讨论】：

好主意。你让我重新思考我的问题。我不会在用户拖动窗口时尝试隐藏某些内容，而是在 mouseout 时将其隐藏并在 mouse in 时将其带回。
Windows 用户可以通过键盘（Alt+Space）移动窗口。您的代码可能会错过此类动作。
很高兴知道！有什么线索可以调查吗？
啊，我明白了，因为它没有运行间隔...现在添加修复的想法。
用户仍然可以通过键盘快捷键操作窗口，例如Windows上的[Meta] + [Right'] || [Left] 在不同大小状态和监视器之间。

【解决方案3】：

关于第一个答案：我在生产代码中使用“轮询窗口位置”。这是一件非常轻量级的事情。每秒两次请求几个对象属性不会减慢任何速度。跨浏览器窗口位置由下式给出：

function get_window_x_pos()
{
   var winx;

   if(window.screenX)
      winx=window.screenX;
   else if(window.screenLeft)
      winx=window.screenLeft;

   return winx;
}

同样适用于垂直位置。在我的代码中，我使用它向服务器触发 AJAX 事件以存储窗口的位置和大小，以便下次它会在上次打开的位置打开（我可能很快会迁移到 HTML5 本地存储。）一点点您可能想要覆盖的皱纹在拖动窗口时不会产生虚假更新。处理这个问题的方法是在第一次移动窗口时进行注册，并且仅当随后的两次窗口位置轮询返回相同的值时才触发更新。更复杂的是允许从各个方面调整大小的窗口。如果左侧或顶部被拖动，DOM 会给你一个 resize 事件，但名义上的窗口位置也会改变。

【讨论】：

【解决方案4】：

很遗憾没有。只通知 DOM 窗口大小、光标位置、“焦点”和“模糊”等；任何影响绘图的东西。由于移动窗口不一定需要“重绘”任何内容（在某种 Javascript/Html 引擎的意义上），因此 DOM 不需要知道它。

【讨论】：

【解决方案5】：

很遗憾，没有。虽然我确实找到了声称有这样的事情的this page。我在 IE、Chrome 和 FireFox 中测试过，没有运气。

【讨论】：

窗口对象的move事件只存在于Netscape 4中。
@Tim Down：可悲，可悲的浏览器……感谢您提供的信息！