I'd like some Javascript code to run when the mouse leaves the browser window. I only need to support Safari (WebKit.)
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.
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.
(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.)
Some ideas I had:
- On each mouseout event, get the actual position of the mouse and see if it is in fact over the window. But I don't know if this is actually possible and it sounds like it would be tricky to eliminate all of the race conditions.
- Also register a mouseover handler and detect cases where mouseout is not proceeded by (or followed shortly by a) a mouseover. But that would require a timer.
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.
Thanks for any suggestions!
