Jquery菜单：mouseover/mouseout moseenter/mouseleave 疯狂

Question

我正在尝试制作一个简单的菜单，其中第一级菜单条目是 li 元素，第二级是带有自己的 li 元素的 ul 块。 没有什么真正明亮的。 CSS 包含所有子菜单的 display: none ，我（乐观的）想法只是在第一级条目上触发 mouseover 时显示正确的 ul 元素，而不是在子菜单上触发 mouseout 时隐藏它们（ul元素）。 我有一些问题无法理解发生了什么。 在 Firefox 上，一切都很好，操作顺序：进入第一级菜单 - 进入子菜单 - 退出子菜单表明触发了正确的事件顺序：menuOn subMenuOn subMenuOff menuOff。 我无法理解为什么在 IE 中，在同一事件序列中，在 subMenuOn 之后突然触发 subMenuOff：结果是子菜单立即消失。 这就像这对 (subMenuOn subMenuOff) 被同时触发以禁用子菜单。 使用 mouseover 或 mouseenter 不会发生任何变化。 使用悬停并不会改变这种情况。 对发生的事情有所了解吗？

$(document).ready(
    function () {
        enableMenu();
    }
);

var flagOnSubMenu = false;

function enableMenu() {
    $('li.menu').bind('mouseenter', menuOn);
    $('li.menu').bind('mouseleave', menuOff);
    $('ul.sottomenu').bind('mouseenter', subMenuOn);
    $('ul.sottomenu').bind('mouseleave', subMenuOff);
}

function menuOn() {
    scrivi('menuOn');
    if (flagOnSubMenu) {
        scrivi('noAction');
        return;
    }

    var subMenuId;

    $('ul.sottomenu').hide();
    subMenuId = $(this).find("ul").attr('id');
    $('#' + subMenuId).show();
}

function menuOff() {
    scrivi('menuOff<br>');
    return;
}

function subMenuOn() {
    scrivi('subMenuOn');
    flagOnSubMenu = true;
}

function subMenuOff() {
    scrivi('subMenuOff');
    flagOnSubMenu = false;
    $(this).hide();
}

function scrivi(arg) {
    $('#debug').html($('#debug').html() + ' ' + arg);
}

Answer 1

我在鼠标悬停和鼠标移出事件方面遇到了一些疯狂的问题。

$("#menu>li").hover(
    function(){
        $("#menu *:animated").stop(true,true).hide(); //stop the madness
        $('ul',this).slideDown();
    },
    function(){
        $('ul',this).slideUp("fast");
    }
);

停止动画对我来说是关键。 如果没有这个，动画将在我将鼠标悬停在菜单上很长时间后继续触发。

Answer 2

有些浏览器/框架会冒泡事件，有些则不会。

即（我不确定 AFA 浏览器会采取哪种方式）当鼠标从一个元素移动到子元素时，一个浏览器将触发 mouseout。 另一个不会但会触发鼠标悬停，该鼠标悬停也可以被父元素捕获。