缓慢移出窗口时 mouseout 不起作用 - 解决方法？答案

【问题标题】：mouseout not working when moving slowly out of the window - workaround?缓慢移出窗口时 mouseout 不起作用 - 解决方法？
【发布时间】：2014-01-17 21:18:06
【问题描述】：

我正在使用以下函数（在this really helpful post 中找到）来检测鼠标是否离开了窗口：

var addEvent = function (obj, evt, fn)
{
  if (obj.addEventListener)
  {
    obj.addEventListener(evt, fn, false);
  }
  else if (obj.attachEvent)
  {
    obj.attachEvent("on" + evt, fn);
  }
};

addEvent(document, "mouseout", function (e)
{
  e = e ? e : window.event;
  var from = e.relatedTarget || e.toElement;
  if (!from || from.nodeName == "HTML")
  {
    console.log("left the window");
  }
});

但是，当鼠标非常缓慢地离开窗口或鼠标在离开窗口之前非常接近窗口边界时，这将不起作用。

有没有办法解决这个问题，使用 jQuery 或纯 Javascript？

【问题讨论】：

标签： javascript jquery mouseout onmouseout

【解决方案1】：

如果你使用 jquery，你可以绑定 mouseout 事件：

$(document).on('mouseout', function () { console.log("left the window") });

您不需要计算对鼠标的任何引用。由于事件直接绑定到文档，因此有效地将其绑定到页面的范围。主内容窗格之外的任何地方（例如标签栏、url 栏、窗口边框等）都在文档之外，并且会触发鼠标移出。它不会在任何其他用户情况下触发。

这是一个有效的Fiddle Demo

【讨论】：

不，这不起作用。我相信由于事件传播，当您将鼠标悬停在文档上时，它会将所有内容检测为鼠标悬停。不幸的是，jQuery 的人没有做到这一点。
在真实条件下试一试。在我们现在所在的页面上（它有 jQuery）。它不工作。
嗯。我所做的是使用 jQuery('body').on...etc.. 然后在回调中检查 X 或 Y 是否为负整数。你是对的，否则它会通过所有元素冒泡。如果任一轴为负，则我知道我离开了可视区域。

【解决方案2】：

我已经完成了这个变通方法，检测它们何时靠近页面边缘（15 像素边距效果很好）。我将它与 mouseout 事件结合使用）

var mouseNearWindowEdge = function(e) {
      var gap = 15;      
      var mp = { x: e.pageX-window.pageXOffset, y: e.pageY-window.pageYOffset };
      if (mp.x<gap || mp.y<gap || mp.x>window.innerWidth-gap || mp.y>window.innerHeight-gap) return true;
      return false;
    };

在 mousemove 上添加事件监听器并调用函数。

【讨论】：