一个函数，用于检查鼠标是否仍在每 10 毫秒悬停一个元素(如果是，则运行一个函数）

A Function to Check if the Mouse is Still Hovering an Element Every 10 Milliseconds (and run a function if it is)

本文关键字：一个 函数 元素 悬停 运行 如果 检查 用于 鼠标 是否      更新时间：2023-09-26

我想知道在悬停元素（例如div class="myiv"）并每X毫秒检查一次是否仍然悬停后是否要运行一个函数，如果是，则运行另一个函数。

编辑：这为我做了诀窍：http://jsfiddle.net/z8yaB/

对于简单界面中的大多数目的，您可以使用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;
};

我使用此功能来检查当我收到鼠标退出事件时鼠标是否真的离开了：

 $('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
});
您可以使用

variablename = setInterval(...)在鼠标悬停时重复启动函数，clearInterval(variablename)在鼠标悬停时停止它。

http://jsfiddle.net/XE8sK/

var marker;
$('#test').on('mouseover', function() {
    marker = setInterval(function() {
        $('#siren').show().fadeOut('slow');
    }, 500);
}).on('mouseout', function() {
    clearInterval(marker);
});​

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

演示 - http://jsfiddle.net/z8yaB/

var interval = 0;
$('.myiv').hover(
    function () {
        interval = setInterval(function(){
           console.log('still hovering');
        },1000);
    }, 
    function () {
        clearInterval(interval);
    }
);
相关文章：