jQuery – 鼠標經過(hover)事件的延時處理

一、關於鼠標hover事件及延時

鼠標經過事件為web頁面上非常常見的事件之一。簡單的hover可以用CSS :hover偽類實現，復雜點的用js。

一般情況下，我們是不對鼠標hover事件進行延時處理。但是，有時候，為了避免不必要的干擾，常會對鼠標hover事件進行延時處理。所謂干擾，就是當用戶鼠標不經意划過摸個鏈接，選項卡，或是其他區域時，本沒有顯示隱藏層，或是選項卡切換，但是由於這些元素上綁定了hover事件（或是mouseover事件），且無延時，這些時間就會立即觸發，反而會對用戶進行干擾。

二、代碼與實現【1】

說到延時，離不開window下的setTimeout方法，本實例的jQuery方法的核心也是setTimeout。代碼不長，完整如下：

(function($){
    $.fn.hoverDelay = function(options){
        var defaults = {
            hoverDuring: 200,
            outDuring: 200,
            hoverEvent: function(){
                $.noop();
            },
            outEvent: function(){
                $.noop();    
            }
        };
        var sets = $.extend(defaults,options || {});
        var hoverTimer, outTimer;
        return $(this).each(function(){
            $(this).hover(function(){
                clearTimeout(outTimer);
                hoverTimer = setTimeout(sets.hoverEvent, sets.hoverDuring);
            },function(){
                clearTimeout(hoverTimer);
                outTimer = setTimeout(sets.outEvent, sets.outDuring);
            });    
        });
    }      
})(jQuery);

這段代碼的目的在於讓鼠標經過事件和延時分離的出來，延時以及延遲的清除都已經由此方法解決了。您所要做的，就是設定延時的時間大小，以及相應的鼠標經過或是移除事件即可。舉個簡單的例子吧，如下代碼：

$("#test").hoverDelay({
    hoverEvent: function(){
        alert("經過我！");
    }
});

表示的含義是id為test的元素在鼠標經過后200毫秒后彈出含有“經過我！”文字字樣的彈出框。

三、代碼與實現【2】

如果鼠標經過事件不會多次調用，可直接使用以下代碼：

$(function(){
    var hoverTimer, outTimer;
    $(".mm-navbar").hover(function(){
        clearTimeout(outTimer);
        hoverTimer = window.setTimeout(function(){
            alert("經過我！");
        },200);
    },function(){
        clearTimeout(hoverTimer);
        outTimer = window.setTimeout(function(){
            alert("離開我！");
        },200);
    });
});