鼠标悬停多次时mouseenter冒泡答案

【问题标题】：mouseenter bubbling when mousehover multiple times鼠标悬停多次时mouseenter冒泡
【发布时间】：2014-05-07 21:53:18
【问题描述】：

当用户多次悬停（mouseenter）时如何防止冒泡或“失控”。当用户悬停时，我使用 slideDown 和 slideUp 进行鼠标离开和延迟，我设置为 250。如果延迟设置为 1 毫秒，我只能解决此问题。以下是我的脚本：

$("#nav li").mouseenter(function (e) {
    e.stopPropagation();
    if (!is_opened) {
        var left = $(this).position().left;
        $(this).children('div').css('left', '-' + left + 'px');
        $(this).children('div').slideDown(delay, function () {
            // Animation complete.
            is_opened = true;
        });
    }

    return false;
});

$("#nav li").mouseleave(function () {

    if (is_opened) {
        $(this).children('div').slideUp(delay, function () {
            // Animation complete.
            is_opened = false;
        });
    } else {
        setTimeout(function () {
            if (is_opened) {
                $('#nav li:first-child').children('div').slideUp(delay, function () {
                    // Animation complete.
                    is_opened = false;
                });

            }
        }, 1000);

    }
    return false;
});

你可以查看我的 JsFiddle here

重现问题

多次悬停目录并停止悬停（但将光标指向目录），您会看到下拉菜单会隐藏，但实际上它应该向下滑动。

【问题讨论】：

你需要 is_opened 标志吗？ jsfiddle.net/peteng/SD4Tp/5
或更好地处理停止：jsfiddle.net/peteng/SD4Tp/10
@Pete，它有效，这应该是正确答案：D
已添加答案，很高兴我能提供帮助

标签： javascript jquery

【解决方案1】：

我认为您的问题是由is_opened 标志引起的，然后动画在旁边运行，更改了left css 属性

如果你改变你的鼠标进入并离开js到下面

   $("#nav li").each(function() {
        //cache vars for better performance
        var li = $(this);
        var left = $(this).position().left;
        var divs = li.children('div');

        //change div left first so it only changes once
        divs.css('left', '-' + left + 'px');

        //do mouse enter and leave stuff
        li.mouseenter(function (e) {
            e.stopPropagation();
            divs.stop(true, true).slideDown(delay);
        });

        li.mouseleave(function () {
            divs.stop().slideUp(delay);
            return false;
        });
    });

它应该可以工作：Example

【讨论】：