jQuery / Javascript检查鼠标是否进入或退出窗口

我在鼠标输入时显示/隐藏此菜单时遇到一些问题。 当鼠标接近HEADER区域时,我想要菜单显示并保持直到鼠标离开区域。

问题是当鼠标退出页面时因为鼠标离开function触发并隐藏我的菜单(如果菜单本身没有锁定)

我设置了一个jsfiddle来更好地解释。 http://jsfiddle.net/aZyz8/1/

 

CSS:

 html { background: grey; height: 100%; width: 100%; } header { background: red; height: 200px; } nav { background: green; width: 100%; height: 50px; position: absolute; top: -50px; } li { display: inline; margin-left: 20px; } 

JS:

 $('header').mouseenter(function() { $('#debug').text('mouse enters header'); $('nav').animate({ top: '0' }); }).mouseleave(function() { $('#debug').text('mouse leaves header'); // if mouse does not leave window $('nav').animate({ top: '-105px' }); });​ 

有没有人知道如何触发“鼠标离开页面”以放入IF? 我尝试了jQuery和普通Javascript方面几乎所有东西,使用hover(),hover和mouseover / mouseout但似乎它不适用于带有html / body标签的mouseout。

我还尝试封装该代码只有在鼠标hoverhtml时工作,但当然当我hover“header”html失败时:无论如何,hover状态会破坏事物。

谢谢

检查事件对象的pageX和pageY,如果超出页面范围则返回。

http://jsfiddle.net/aZyz8/5/

 $('header').mouseenter(function() { $('#debug').text('mouse enters header'); $('nav').animate({ top: '0' }); }).mouseleave(function(e) { var pageX = e.pageX || e.clientX; var pageY = e.pageY || e.clientY; if (pageX < 0 || pageY < 0) { // don't execute the rest of this callback return; } $('#debug').text('mouse leaves header'); // if mouse does not leave window $('nav').animate({ top: '-105px' }); });​ 

如果您希望在用户将光标移出窗口时可以看到菜单,则可以在mouseleave事件上检查鼠标坐标。

 $('header').mouseenter(function() { $('#debug').text('mouse enters header'); $('nav').animate({ top: '0' }); }).mouseleave(function(event) { $('#debug').text('mouse leaves header'); // if mouse does not leave window if (event.clientX <= 0 || event.clientY <= 0) { return; } $('nav').animate({ top: '-105px' }); });​ 

这是一个例子。