Javascript的事件，当鼠标离开浏览器窗口 [英] Javascript event when mouse leaves browser window
问题描述
我想一些JavaScript code当鼠标离开浏览器窗口中运行。我只需要支持Safari浏览器（WebKit的。）
I'd like some Javascript code to run when the mouse leaves the browser window. I only need to support Safari (WebKit.)
我试图把一个mouseout事件处理程序的窗口。当鼠标离开浏览器窗口该处理程序被可靠地调用。因为鼓泡，但也被称为当文件中的元素之间的鼠标移动。我无法弄清楚如何确定，当鼠标实际上已经离开了窗口，当它只是元素之间移动。
I tried putting a mouseout handler on window. That handler is reliably called when the mouse leaves the browser window. But because of bubbling it is also called when the mouse moves between elements in the document. I can't figure out how to determine when the mouse has actually left the window and when it has only moved between elements.
当鼠标离开窗口，恰好产生一个事件，并且目标元素似乎是鼠标实际上在元件。所以检查是否目标元素是窗口或文档不起作用。和包装的整个页面在一个无形包含分区也不管用：如果DIV是无形的，然后将鼠标永远不会结束，所以没有什么变化。
When the mouse leaves the window, exactly one event is generated, and the target element appears to be the element the mouse was actually over. So checking to see if the target element is window or document doesn't work. And wrapping the whole page in an invisible containing div doesn't work either: if the div is invisible, then the mouse will never be over it, so nothing changes.
（同样的事情发生，如果我把处理程序上的文档或document.body的，但令人惊讶的document.body的没有得到鼠标悬停/的mouseout事件，当鼠标进入或离开该窗口的空白部分，如空由绝对创造了垂直空间定位与底部的元素：0对于空间，文件和窗口将得到鼠标悬停/的mouseout事件的目标是＆LT; HTML＆gt;中，但document.body的不会）
(The same thing happens if I put the handler on document or document.body, except that surprisingly document.body does not get mouseover/mouseout events when the mouse enters or leaves an empty part of the window, such as the empty vertical space created by absolutely positioning an element with bottom:0. For that space, document and window will get mouseover/mouseout events with the target being <html>, but document.body will not.)
一些想法我有：
- 在每个mouseOut事件，让鼠标的实际位置，看看它实际上是在窗户上。但我不知道这实际上是可能的，这听起来像这将是棘手的，以消除所有的比赛条件。
- 另外注册一个鼠标悬停处理程序，并发现那里的mouseout是通过（通过或之后不久）一个鼠标悬停没有进行的情况下。但这需要一个计时器。
我们使用的prototype.js所以理论上讲，我想前preSS在原型的Event.observe方面的解决方案，但我可以计算的那部分。
We use prototype.js so ideally I'd like to express the solution in terms of prototype's Event.observe, but I can figure that part out.
感谢您的任何建议！
推荐答案
摘要：可以被干净的mouseout事件中检查relatedTarget财产做。如果relatedTarget不是文档中的孩子，然后将鼠标刚刚离开窗口。这很容易做自己，但如果你不想，一些库（MooTools的，未来的原型。）纷纷出炉，在功能性，和其他人（目前的原型）可用扩展。上的IE，可以改为使用鼠标离开，这是的mouseout的非鼓泡版本
SUMMARY: This can be done cleanly by checking the relatedTarget property during the mouseout event. If relatedTarget is not a child of document, then the mouse just left the window. It's easy to do yourself, but if you don't want to, some libraries (Mootools, future Prototype..) have baked-in functionality, and others (current Prototype) have extensions available. On IE, you could instead use mouseleave, which is a non-bubbling version of mouseout.
详细信息：
IE浏览器的事件称作的mouseenter和鼠标离开是鼠标悬停和mouseout事件不冒泡的版本。其他浏览器不这样做，但如果他们做到了，在窗口或文档设置鼠标离开听者会做的伎俩。
IE has events called mouseenter and mouseleave that are non-bubbling versions of mouseover and mouseout. Other browsers do not, but if they did, setting a mouseleave listener on window or document would do the trick.
名为肯·斯奈德一位先生就派上用场了：
A gentleman named Ken Snyder comes to the rescue:
在鼠标悬停时，relatedTarget 属性引用从节点 该指针来了。在一个的mouseout， 在relatedTarget属性引用 节点到的指针went.On 任何情况下，适用范围是该节点 该事件attached.When的 relatedTarget是不是孩子 currentTarget当前，鼠标悬停事件 相当于一个的mouseenter事件和一 mouseout事件是相当于一个 MouseLeave事件。
On a mouseover, the relatedTarget property references the node from which the pointer came. On a mouseout, the relatedTarget property references the node to which the pointer went.On any event, the scope is the node to which the event is attached.When the relatedTarget is a not child of the currentTarget, a mouseover event is equivalent to a mouseenter event and a mouseout event is equivalent to a mouseleave event.
- <一个href="http://kendsnyder.com/archives/6-MouseEnter-and-MouseLeave.html">http://kendsnyder.com/archives/6-MouseEnter-and-MouseLeave.html
这使得它可以实现在其他浏览器的mouseenter和鼠标离开。事实上，肯提供相同的原型code这样做的：<一href="http://kendsnyder.com/sandbox/enterleave/MouseEnterLeave.js">http://kendsnyder.com/sandbox/enterleave/MouseEnterLeave.js
This makes it possible to implement mouseenter and mouseleave in other browsers. In fact, Ken provides same Prototype code to do so: http://kendsnyder.com/sandbox/enterleave/MouseEnterLeave.js
Duroth指出，在评论认为MooTools里面已经包含了类似的东西。 （感谢Duroth）这听起来像即将到来的原型版本（1.6.2）可能会包含此功能，但我找不到任何明确的。
Duroth pointed out in comments that MooTools already includes something similar. (Thanks Duroth.) It sounds like the upcoming Prototype release (1.6.2) may include this functionality, but I can't find anything definite.
这篇关于Javascript的事件，当鼠标离开浏览器窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
