jQuery：鼠标还在元素上吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1857191/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery: is mouse still over the element?
提问by thedp
I would like to be able to detect if the mouse is still over the element in the following scenario:
我希望能够在以下情况下检测鼠标是否仍在元素上：
- If mouseover then sleep for a few seconds.
- Once done sleeping check of the mouse is still over the same element.
- If true then do something.
- 如果鼠标悬停，则休眠几秒钟。
- 一旦完成鼠标的睡眠检查，鼠标仍然在同一个元素上。
- 如果为真，那么做点什么。
How can I achieve #2?
我怎样才能达到#2？
Thank you.
谢谢你。
回答by Vilius Paulauskas
This seems to work (http://jsbin.com/uvoqe)
这似乎有效（http://jsbin.com/uvoqe）
$("#hello").hover( function () {
$(this).data('timeout', setTimeout( function () {
alert('You have been hovering this element for 1000ms');
}, 1000));
}, function () {
clearTimeout($(this).data('timeout'));
});
回答by nickf
Take a look at the hoverIntentplugin for jQuery. It gives you a new event handler which will fire only if you have been hovering over an element for a certain amount of time. By tweaking its options, you should be able to get it to do exactly what you want.
看看jQuery的hoverIntent插件。它为您提供了一个新的事件处理程序，仅当您将鼠标悬停在某个元素上一段时间时才会触发该事件处理程序。通过调整其选项，您应该能够让它完全按照您的意愿行事。
回答by PetersenDidIt
Just use a flag to tell you if the mouse is over it.
只需使用一个标志来告诉您鼠标是否在它上面。
var mouseover = false;
$('.thing').mouseenter(function(){
mouseover = true;
}).mouseleave(function(){
mouseover = false;
});
回答by roman m
Here's one way:
这是一种方法：
When you set .hover()on the element, you can pass 2 functions to it. The first one will fire when the mouse is over the element, the second fires when mouse moves out.
当您在元素上设置.hover()时，您可以将 2 个函数传递给它。第一个将在鼠标悬停在元素上时触发，第二个在鼠标移出时触发。
The first function can set the currentElementId(or some other flag) and the second function will clear that. This way the only thing you need to do is to check if currentElementIdis blank.
第一个函数可以设置currentElementId（或其他一些标志），第二个函数将清除它。这样你唯一需要做的就是检查是否currentElementId为空白。
回答by Jacob Relkin
You can use setTimeout( 'sleep', sleep_time )to call a function after a set time.
您可以使用setTimeout( 'sleep', sleep_time )在设定的时间后调用函数。
Assign event handlers to onmouseover and onmouseout.
将事件处理程序分配给 onmouseover 和 onmouseout。
These handlers modify a flag to check if the mouse is still on the element.
这些处理程序修改一个标志以检查鼠标是否仍在元素上。
Inside of the sleep function, you can check the flag, and just return it.
在 sleep 函数内部，您可以检查标志，然后将其返回。
回答by Anupam Dwivedi
I used a hyperlink to show a divand then on hoverevent I set the timeout property of this and as soon as I go to my divI clear the timeout and start using the div's hoverfunction to fadeout the div. I hope this will help you.
我使用了一个超链接来显示一个div，然后在hover事件中我设置了这个的超时属性，一旦我去我的div我就清除超时并开始使用div的hover函数来淡出div. 我希望这能帮到您。
<script type="text/javascript">
$(document).ready(function () {
var obj;
$("a").hover(function () {
if ($("#div1").is(":hidden")) {
$("#div1").fadeIn(300).show();
}
}, function () {
obj = setTimeout("jQuery('#div1').fadeOut(300);", 300);
});
$("#div1").hover(function () {
clearTimeout(obj);
if ($("#div1").is(":hidden")) {
$("#div1").show();
}
}, function () {
jQuery('#div1').fadeOut(300);
});
});
</script>
