Question

我正在使用以下功能（在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？

Answer 1

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

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

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

这是一个有效的Fiddle Demo

Answer 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上添加事件监听器并调用该函数。

当慢慢移出窗口时，mouseout无法正常工作 - 解决方法？

2 个答案: