需求

當滑鼠劃過導航欄中某一選單項時，顯示其完整子選單；滑鼠移動出該選單項及其對應的子選單時，延遲0.5s子選單消失。

思路

首先，將子選單#sub-menu設定為display:none；並且在選單項及其子選單項的工頭父元素#nav上繫結事件：

    var nav = $("#nav");
    nav.bind("mouseover", function () {
        if (!nav.hasClass("show")) {
            nav.addClass("show");
        }
    });

    nav.bind("mouseout"
 
, function () {
        setTimeout(function () {
            nav.removeClass("show");
        }, 500);
    });

其中，.show #sub-menu{display:block};

問題

當滑鼠移動到選單項時，子選單顯示；移出後，子選單0.5s後消失。但是，當滑鼠移動到子選單中的某一子選單項時，繫結在#nav上的滑鼠移入、移出事件會重複觸發，導致.show不停新增、刪除。經過研究，是因為子選單項的滑鼠事件冒泡導致。

最終解決

Jquery有兩個事件分別對應無冒泡的滑鼠移入、移出：mouseenter和mouseleave。

修改程式碼：

    var nav = $("#nav");
    nav.bind("mouseenter", function () {
        if (!nav.hasClass("show")) {
            nav.addClass("show");
        }
    });

    nav.bind("mouseleave", function () {
        setTimeout(function () {
            nav.removeClass("show");
        }, 400);
    });
 

總結

這次問題比較簡單，其實可以不解決。但是我這是在模仿別人頁面時發現的區別，所以為了保證功能一致，就搜尋了一下解決辦法。以後開發的時候也要注意事件發生在冒泡和捕獲階段時的區別。