获取 MouseLeave 事件后鼠标悬停的第一个元素答案

【问题标题】：Get the first element that the mouse hovered after a MouseLeave event获取 MouseLeave 事件后鼠标悬停的第一个元素
【发布时间】：2012-05-09 02:49:28
【问题描述】：

使用 jQuery/Javascript，我如何检查在 MouseLeave 事件之后鼠标悬停的第一个元素是什么？

基本上，我想从元素数组中检查鼠标是否在这些元素上滚动。

我正在尝试使用event.relatedTarget。

有什么帮助吗？

【问题讨论】：

标签： javascript jquery dom dom-events

【解决方案1】：

鼠标事件上存在relatedTarget 属性

MouseEvent.relatedTarget 只读属性是鼠标事件的次要目标，如果有的话

对于mouseleave，它指向输入的元素。

所以你可以这样做

$('element').mouseleave(function(event){
    // assuming that allowedList holds the array of allowed elements
    if ( allowedList.indexOf( event.relatedTarget ) > -1 ){
        // found
    } else {
        // not found
    }
});

http://jsfiddle.net/gaby/V4pJb/ 上的演示

【讨论】：

这正是我想要达到的目标。

【解决方案2】：

使用 jQuery，您可以这样做：

$("#foo").mouseleave(function(e) {
    var element = $(e.target);
});

这是一个工作示例。您可以将鼠标悬停在文本“Hello”上，鼠标移出时，它会告诉您它要离开哪个元素。 http://jsfiddle.net/k7Gfv/

如果 mouseenter（或 hover）与 mouseleave 不同，那么您需要使用变量进行跟踪。在 mouseenter（或悬停）上，设置一个将存储该元素的变量。在 mouseleave 时，您可以引用该变量（只需记住在下次触发 mouseenter 时清除或重置该值）。

【讨论】：

【解决方案3】：

不确定您在寻找什么，但可能是这样的：

var elements = $("#a1, #a2");

$("#a3").on('mouseleave', nextElm);

function nextElm() {
    $('div').on('mouseenter', thisIsIt);
    $("#r").html('Now hover another element ?');   
}

function thisIsIt(e) {
    if ($.inArray(e.target, elements)!=-1){
        $("#r").html('yes');
    }else{
        $("#r").html('no');            
    }
    $("#a3").off('mouseleave', nextElm);
    $('div').off('mouseenter', thisIsIt);
}

FIDDLE

【讨论】：

【解决方案4】：

你可以做这样的事情。 Here's a fiddle

var hovered = false;;
$('div').mouseleave(function(e) {
    hovered = true;
});
$('div').hover(function(ev) {
        if (hovered) {
            alert(ev.target);
            hovered = false;
        }
});

【讨论】：