jQuery/Javascript检查鼠标是否在窗口中

我在鼠标输入时显示/隐藏此菜单时遇到了一些麻烦。当鼠标靠近HEADER区域并保持直到鼠标离开区域时，我希望菜单显示。jQuery/Javascript检查鼠标是否在窗口中

问题是，当鼠标离开该网页，因为鼠标离开函数触发和隐藏我的菜单（如果菜单本身没有锁）

我成立了一个的jsfiddle更好地说明。 http://jsfiddle.net/aZyz8/1/

<html> 
    <header> 
    <nav> 
     <ul> 
     <li><a href="#">Menu Item 1</a></li> 
     <li><a href="#">Menu Item 2</a></li> 
     <li><a href="#">Menu Item 3</a></li> 
     </ul> 
    </nav> 
    </header> 
    <div id="debug"></div> 
</html>

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' 
    }); 
});

有谁会对我有什么做的，触发 “鼠标离开页面” 就摆在一个线索，如果？我尝试了几乎所有的jQuery和纯Javascript的一面，使用悬停（），：悬停和mouseover/mouseout，但它似乎不会在HTML /身体标签mouseout工作。

我也尝试封装该代码工作，只有当鼠标悬停HTML，但当然，当我悬停“标题”HTML丢失：无论如何悬停状态打破事情。

感谢

来源

2012-03-31 Mauro

我没有得到问题.. – jAndy 2012-03-31 17:59:41

我也没有，这里的问题到底是什么？ – Shomz 2012-03-31 18:50:21

检查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' 
    }); 
});

来源

2012-03-31 18:09:27 Trevor

当鼠标重新进入该区域的某处时，不要忘记为非标题区域添加一个'mouseenter'事件来隐藏它。现在你必须进入并离开标题才能再次隐藏它。 – ThiefMaster 2012-03-31 18:45:40

工作正常，谢谢！ – Mauro 2012-04-01 14:07:46

它似乎不工作，如果'mouseleave'通过红色右侧的红色格 – 2013-12-18 09:32:13

如果要在用户移动光标窗外您可以检查鼠标离开事件鼠标坐标的菜单是可见的。

$('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' 
    }); 
});

Here就是一个例子。

来源

2012-03-31 18:10:00

'event = event || window.event;'使用jQuery时不需要。 – ThiefMaster 2012-03-31 18:46:24

jQuery/Javascript检查鼠标是否在窗口中

回答

相关问题