JQuery - Как проверить, какой элемент находится над (но НЕ какой-либо конкретный элемент!)

Question

Я хотел бы использовать jQuery, чтобы определить, какой элемент в данный момент находится над ним. Это может быть любой элемент на странице, означающий, что mouseover, mouseout, mouseenter и mouseleave здесь не применяются, так как они относятся к определенному элементу.

Вот краткий пример:

$(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;    
}