jQuery / Javascript检查鼠标是否在窗口中 [英] jQuery / Javascript check if mouse is in or out window
问题描述
在鼠标输入时显示/隐藏此菜单时遇到一些问题。当鼠标靠近HEADER区域并保持直到鼠标离开区域时，我希望菜单显示。
问题是鼠标退出页面时，因为mouseleave函数触发并隐藏我的菜单（如果菜单本身未被锁定）
我设置了一个jsfiddle来更好地解释。 http://jsfiddle.net/aZyz8/1/
< html>
< header>
< nav>
< ul>
< li>< a href =＃>选单项目1< / a>< / li>
< li>< a href =＃>菜单项目2< / a>< / li>
< li>< a href =＃>选单项目3< / a>< / li>
< / ul>
< / nav>
< / header>
< div id =debug>< / div>
< / html>
CSS：
html {
background：grey;
身高：100％;
宽度：100％;
}
标题{
background：red;
height：200px;
}
nav {
background：green;
宽度：100％;
height：50px;
位置：绝对;
top：-50px;
}
li {
display：inline;
margin-left：20px;
JS：
<$ $（'＃debug'）。text（'mouse entered header'）;
$（$ {$'$'$'$'$'$' 'nav'）。animate（{
top：'0'
}）;
}）。mouseleave（function（）{
$（'＃debug'）。text （'mouse leaves header'）;
//如果鼠标不离开窗口
$（'nav'）。animate（{
top：'-105px'
}） ;
}）;
有人知道我必须做什么触发鼠标离开页面放入那个IF？我尝试了几乎所有的jQuery和纯Javascript方面，使用hover（）：hover和mouseover / mouseout，但它似乎不适用于带有html / body标签的mouseout。
我也尝试封装该代码，以便只在鼠标悬停html时才工作，但当然当我悬停标题html时丢失：无论如何悬停状态都会中断。
谢谢
$ b
$（'header'）。mouseenter（function（）{
$（'＃debug'）。text 'mouse into 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）{//不执行此回调的其余部分
return;
$（'＃debug'）。text（'mouse leaves header'）;
//如果鼠标不离开窗口
$（'nav'）。animate（{
top：'-105px'
}）;
}）;
I have some trouble showing/hiding this menu on mouse enter. I'd like the menu show when the mouse approaches the HEADER zone and stay up until the mouse leaves the zone.
The problem is when the mouse exits the page because the mouseleave function triggers and hide my menu (if the menu itself was not locked)
I set up a jsfiddle to explain better. 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'
});
});
Does anybody have a clue on what do I have to do to trigger "mouse leaves page" to put in that IF? I tried almost everything both jQuery and plain Javascript side, using hover(), :hover and mouseover/mouseout but it seems it won't work on mouseout with html/body tags.
I also tried encapsulating that code to work only if mouse was hover html but of course when I hover "header" html loses :hover status breaking things anyway.
Thanks
Check pageX and pageY of the event object to return if outside the bounds of the page.
$('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'
});
});
这篇关于jQuery / Javascript检查鼠标是否在窗口中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
