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

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

鼠標通過事件爲web頁面上很是常見的事件之一。簡單的hover能夠用CSS :hover僞類實現，複雜點的用js。

通常狀況下，咱們是不對鼠標hover事件進行延時處理。可是，有時候，爲了不沒必要要的干擾，常會對鼠標hover事件進行延時處理。所謂干擾，就是當用戶鼠標不經意劃過摸個連接，選項卡，或是其餘區域時，本沒有顯示隱藏層，或是選項卡切換，可是因爲這些元素上綁定了hover事件（或是mouseover事件），且無延時，這些時間就會當即觸發，反而會對用戶進行干擾。

2、代碼與實現【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毫秒後彈出含有「通過我！」文字字樣的彈出框。

3、代碼與實現【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);
    });
});