鼠标离开浏览器窗口时的Javascript事件[重复]

Question

我希望当鼠标离开浏览器窗口时运行一些Javascript代码。我只需要支持Safari（WebKit）。

我尝试将mouseout处理程序放在窗口上。当鼠标离开浏览器窗口时，将可靠地调用该处理程序。但是由于冒泡，当鼠标在文档中的元素之间移动时也会被调用。我不知道如何确定鼠标何时真正离开窗口以及何时仅在元素之间移动。

当鼠标离开窗口时，将恰好生成一个事件，并且目标元素似乎是鼠标实际上位于其上方的元素。因此，检查目标元素是窗口还是文档是行不通的。并且将整个页面包装在不可见的div中也不起作用：如果div不可见，则鼠标将永远不会在其上方，因此不会发生任何变化。

（如果我将处理程序放在document或document.body上，也会发生同样的事情，除了令人惊讶的是，当鼠标进入或离开窗口的空白部分（例如创建的空白垂直空间）时，document.body不会获得mouseover
/ mouseout事件通过将元素的绝对位置设置为bottom：0。对于该空间，文档和窗口将获得mouseover /
mouseout事件，目标为，而document.body则不会。）

我有一些想法：

• 在每个mouseout事件上，获取鼠标的实际位置，然后查看它是否确实在窗口上方。但是我不知道这是否真的可能，而且消除所有比赛条件似乎很棘手。
• 还注册一个鼠标悬停处理程序，并检测没有鼠标悬停进行鼠标悬停的情况。但这需要一个计时器。

我们使用prototype.js，所以理想情况下，我想用原型的Event.observe来表达解决方案，但是我可以弄清楚这一点。

感谢您的任何建议！

Answer 1

简介：
可以通过在mouseout事件期间检查relatedTarget属性来干净地完成此操作。如果relatedTarget不是文档的子级，则鼠标刚离开窗口。自己做起来很容易，但是如果您不想这样做，则某些库（Mootools，将来的Prototype..）具有内置功能，而另一些（当前Prototype）具有扩展可用。在IE上，您可以改用mouseleave，这是mouseout的非冒泡版本。

细节：

IE具有名为mouseenter和mouseleave的事件，它们是mouseover和mouseout的非冒泡版本。其他浏览器则不会，但是如果这样做，则在窗口或文档上设置mouseleave侦听器可以解决问题。

一位名叫肯·斯奈德（K​​en Snyder）的绅士前来救援：

鼠标悬停时，relatedTarget属性引用指针所来自的节点。在mouseout上，relatedTarget属性引用指针所指向的节点。在任何事件上，作用域是事件附加到的节点。当relatedTarget不是currentTarget的子代时，mouseover事件等效于mouseenter事件和mouseout事件等效于mouseleave事件。

- http://kendsnyder.com/archives/6-MouseEnter-and-
MouseLeave.html

这使得在其他浏览器中实现mouseenter和mouseleave成为可能。实际上，Ken为此提供了相同的Prototype代码：http
:
//kendsnyder.com/sandbox/enterleave/MouseEnterLeave.js

Duroth在评论中指出MooTools已经包含类似的东西。（感谢Duroth。）听起来好像即将发布的Prototype版本（1.6.2）可能包含此功能，但我找不到任何确定的东西。