Question

我想使用jQuery来确定当前正在悬停的元素。它可以是页面上的任何元素，这意味着mouseover，mouseout，mouseenter和mouseleave不适用于此，因为它们与特定元素相关。< / p>

以下是一个快速示例：

$(window).bind('mousemove', function() {
    if (elementBeingHoveredOver.attr('id') != 'foo') {
        // ... (Do some cool stuff here) ...
        $(window).unbind('mousemove');
    }
});

我知道，我知道，看起来将mouseenter和mouseleave事件处理程序绑定到#foo元素会更好，就这样做，但是鼠标通常移动太快而无法注册mouseleave事件，因此我想以这种方式尝试。

有关如何确定elementBeingHoveredOver的任何想法？

Answer 1

试试这个

$(window).bind('mousemove', function(e) {
    if ($(e.target).attr('id') != 'foo') {
        // ... (Do some cool stuff here) ...
        $(window).unbind('mousemove');
    }
});

Answer 2

虽然我仍建议您绑定页面上每个元素的鼠标移动事件，但这里有一种通过鼠标位置查找元素的方法：

当您绑定到文档的鼠标移动事件时，您可以使用pageX和pageY获取光标位置：

$(document).mousemove(function(e){
    alert(e.pageX);
    alert(e.pageY);
});

然后使用.offset()，您可以在页面上获取元素位置：

function elementBeingHoveredOver(mouseX, mouseY) {

    $('*').each(function() {
        var x = $(this).offset().left;
        var y = $(this).offset().top;
        var width = $(this).width();
        var height = $(this).height();

        if (x <= mouseX && y <= mouseY && (x + width) >= mouseX && (y + height) >= mouseY) {
            return $(this);
        }
    });

    return null;    
}

jQuery - 如何检查正在悬停的元素（但不是任何特定元素！）

2 个答案: