我想知道在元素(例如 div class="myiv")悬停后是否有要运行的函数,如果它仍然悬停,则每 X 毫秒检查一次,如果是,则运行另一个函数。
编辑:这对我有用:http: //jsfiddle.net/z8yaB/
我想知道在元素(例如 div class="myiv")悬停后是否有要运行的函数,如果它仍然悬停,则每 X 毫秒检查一次,如果是,则运行另一个函数。
编辑:这对我有用:http: //jsfiddle.net/z8yaB/
jQuery 有 hover() 方法,它为您提供了开箱即用的功能:
$('.myiv').hover(
function () {
// the element is hovered over... do stuff
},
function () {
// the element is no longer hovered... do stuff
}
);
每隔 x 毫秒检查一次元素是否仍然悬停并响应以下调整:
var x = 10; // number of milliseconds
var intervalId;
$('.myiv').hover(
function () {
// the element is hovered over... do stuff
intervalId = window.setInterval(someFunction, x);
},
function () {
// the element is no longer hovered... do stuff
window.clearInterval(intervalId);
}
);
您可以使用variablename = setInterval(...)
在鼠标悬停时重复启动功能,并在鼠标悬停clearInterval(variablename)
时停止它。
var marker;
$('#test').on('mouseover', function() {
marker = setInterval(function() {
$('#siren').show().fadeOut('slow');
}, 500);
}).on('mouseout', function() {
clearInterval(marker);
});
对于简单界面中的大多数用途,您可以使用 jquery 的悬停功能,如果鼠标悬停,则只需将布尔值存储在某处。然后你可以使用一个简单的setInterval
循环来检查每毫秒这个状态。您还可以在链接副本中的第一条评论中看到此答案(编辑:现在在此处的其他答案中)。
但是在某些情况下,特别是当悬停时您的对象“在”鼠标和您的对象之间移动时会产生误报。
对于这些情况,我创建了这个函数来检查当 jquery 调用我的处理程序时事件是否真的是悬停元素:
var bubbling = {};
bubbling.eventIsOver = function(event, o) {
if ((!o) || o==null) return false;
var pos = o.offset();
var ex = event.pageX;
var ey = event.pageY;
if (
ex>=pos.left
&& ex<=pos.left+o.width()
&& ey>=pos.top
&& ey<=pos.top+o.height()
) {
return true;
}
return false;
};
当我收到 mouseout 事件时,我使用这个函数来检查鼠标是否真的离开了:
$('body').delegate(' myselector ', 'mouseenter', function(event) {
bubbling.bubbleTarget = $(this);
// store somewhere that the mouse is in the object
}).live('mouseout', function(event) {
if (bubbling.eventIsOver(event, bubbling.bubbleTarget)) return;
// store somewhere that the mouse leaved the object
});
var interval = 0;
$('.myiv').hover(
function () {
interval = setInterval(function(){
console.log('still hovering');
},1000);
},
function () {
clearInterval(interval);
}
);