是否有一个快速和简单的方法来做到这一点在jQuery,我错过了?
我不想使用鼠标悬停事件,因为我已经将它用于其他事情。我只需要知道鼠标在给定时刻是否在某个元素上。
我想做一些这样的事情,如果有一个“IsMouseOver”函数:
function hideTip(oi) {
setTimeout(function() { if (!IsMouseOver(oi)) $(oi).fadeOut(); }, 100);
}
是否有一个快速和简单的方法来做到这一点在jQuery,我错过了?
我不想使用鼠标悬停事件,因为我已经将它用于其他事情。我只需要知道鼠标在给定时刻是否在某个元素上。
我想做一些这样的事情,如果有一个“IsMouseOver”函数:
function hideTip(oi) {
setTimeout(function() { if (!IsMouseOver(oi)) $(oi).fadeOut(); }, 100);
}
当前回答
在jQuery中,你可以使用.is(':hover')
function IsMouseOver(oi)
{
return $(oi).is(':hover');
}
现在是提供OP中请求的函数的最简洁的方式。
注意:以上操作在IE8及以下版本中无效
作为在IE8中工作的不那么简洁的替代方案(如果我可以信任IE9的IE8模式),并且这样做没有触发$(…).hover(…)到处都是,也不需要知道元素的选择器(在这种情况下Ivo的答案更容易):
function IsMouseOver(oi)
{
return oi.length &&
oi.parent()
.find(':hover')
.filter(function(s){return oi[0]==this})
.length > 0;
}
其他回答
你可以使用is(':visible');在jquery 对于$('.item:hover'),它也在Jquery中工作。
这是一个HTM代码片段:
<li class="item-109 deeper parent">
<a class="root" href="/Comsopolis/index.php/matiers"><span>Matiers</span></a>
<ul>
<li class="item-110 noAff">
<a class=" item sousMenu" href="/Comsopolis/index.php/matiers/tsdi">
<span>Tsdi</span>
</a>
</li>
<li class="item-111 noAff">
<a class="item" href="/Comsopolis/index.php/matiers/reseaux">
<span>Réseaux</span>
</a>
</li>
</ul>
</li>
这是JS代码:
$('.menutop > li').hover(function() {//,.menutop li ul
$(this).find('ul').show('fast');
},function() {
if($(this).find('ul').is(':hover'))
$(this).hide('fast');
});
$('.root + ul').mouseleave(function() {
if($(this).is(':visible'))
$(this).hide('fast');
});
这就是我说的:)
在jQuery中,你可以使用.is(':hover')
function IsMouseOver(oi)
{
return $(oi).is(':hover');
}
现在是提供OP中请求的函数的最简洁的方式。
注意:以上操作在IE8及以下版本中无效
作为在IE8中工作的不那么简洁的替代方案(如果我可以信任IE9的IE8模式),并且这样做没有触发$(…).hover(…)到处都是,也不需要知道元素的选择器(在这种情况下Ivo的答案更容易):
function IsMouseOver(oi)
{
return oi.length &&
oi.parent()
.find(':hover')
.filter(function(s){return oi[0]==this})
.length > 0;
}
我经常看到超时用于此,但在事件的上下文中,您不能像这样查看坐标吗?:
function areXYInside(e){
var w=e.target.offsetWidth;
var h=e.target.offsetHeight;
var x=e.offsetX;
var y=e.offsetY;
return !(x<0 || x>=w || y<0 || y>=h);
}
根据上下文,您可能需要在调用areXYInside(e)之前确保(this==e.t target)。
我正在考虑在dragLeave处理程序中使用这种方法,以确认dragLeave事件不是由进入子元素触发的。如果您没有以某种方式检查您是否仍然在父元素中,那么您可能会错误地执行仅在真正离开父元素时才执行的操作。
编辑:这是一个很好的想法,但并不能始终如一地工作。也许要做一些小调整。
警告:is(':hover')在jquery 1.8+中已弃用。请参阅这篇文章以获得解决方案。
你也可以使用这个答案:https://stackoverflow.com/a/6035278/8843来测试鼠标是否悬停在一个元素上:
$('#test').click(function() {
if ($('#hello').is(':hover')) {
alert('hello');
}
});
在鼠标退出时设置超时以淡出并将返回值存储为对象中的数据。然后onmouseover,如果数据中有值,取消超时。
删除淡出的回调数据。
使用mouseenter/mouseleave实际上成本更低,因为当child鼠标悬停/鼠标退出触发时,它们不会触发菜单。