分享一個jquery插件,彌補一下hover事件的小小不足

時間 2019-11-09

標籤分享一個 jquery 插件彌補一下 hover 事件小小不足欄目 JQuery 简体版

原文原文鏈接

hover事件有一個缺點:當你的鼠標無心劃過一個dom元素(瞬間劃過,這個時候用戶可能不想觸發hover事件),會觸發hover事件css

應該設置一個時差來控制hover事件的觸發html

好比jd左邊的菜單你用鼠標瞬間劃過他子菜單會彈出而後當即消失, 用戶體驗很是的很差.jquery

易迅的菜單就沒有這個問題安全

delayHover來解決這個問題dom

啥也不說了先看調用…………………………函數

調用方式:ui

var duration = 500;// 延遲500毫秒

$('#div1').delayHover(function () {
     $(this).css('background', '#ccc');
}, function () {
     $(this).css('background', '#000');
}, duration)

duration表示延遲多少時間來觸發hover事件this

實現原理spa

設置一個定時器來開啓hover事件code

上代碼

$.fn.delayHover = function (fnOver, fnOuter, duration) {
    var _this = this
    var timerOut; //開啓hover的定時器
    $(this).hover(function () {
        timerOut = setTimeout(function () {
            fnOver.call(_this);
        }, duration)
    }, function () {
        clearTimeout(timerOut)
        fnOuter.call(_this);;
    })
}

fnOver開啓一個定時器

fnOuter關閉定時器

bug修復:

1.fnOuter每次都會執行(即便fnOver不執行)

2.duration對傳入的值進行安全監測

; (function ($) {

    $.fn.delayHover = function (fnOver, fnOut, duration) {
        var _this = this;
        var timeouter;
        var defaultDuration = 500;//默認500 毫秒
        var fnOver_Running = false;  //函數已經執行

        //重置duration
        if (typeof duration != "number" ||//不是字符串
            isNaN(duration) || //NaN
            duration < 0) { //非法值

            duration = defaultDuration;
        }

        $(_this).hover(function (event) {
            timeouter = setTimeout(function () {
                fnOver_Running = true;
                fnOver.call(_this, event)
            }, duration);
        }, function (event) {
            clearTimeout(timeouter);
            if (fnOver_Running) {
                fnOver_Running = false;
                fnOut.call(_this, event);
            }
        });
        return $(this);
    }

})(jQuery);

完整代碼

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
 
    <style>
        .hover {
            background: #000;
            color: #fff;
        }
    </style>

    <script>
        ; (function ($) {

            $.fn.delayHover = function (fnOver, fnOut, duration) {
                var _this = this;
                var timeouter;
                var defaultDuration = 500;//默認500 毫秒
                var fnOver_Running = false;  //函數已經執行

                //重置duration
                if (typeof duration != "number" ||//不是字符串
                    isNaN(duration) || //NaN
                    duration < 0) { //非法值

                    duration = defaultDuration;
                }

                $(_this).hover(function (event) {
                    timeouter = setTimeout(function () {
                        fnOver_Running = true;
                        fnOver.call(_this, event)
                    }, duration);
                }, function (event) {
                    clearTimeout(timeouter);
                    if (fnOver_Running) {
                        fnOver_Running = false;
                        fnOut.call(_this, event);
                    }
                });
                return $(this);
            }

        })(jQuery);
    </script>


    <script> 
        $(function () {

            $('#hovertest').hover(function () {
                console.log('指向');
                $(this).addClass('hover');
            },
            function () {
                console.log('離開');
                $(this).removeClass('hover');
            });

            $('#delayHover').delayHover(function () {
                console.log('指向');

                $(this).addClass('hover');
            }, function () {
                console.log('離開');
                $(this).removeClass('hover');
            }, 500);
            
            $('#delayHover1').delayHover(function () {
                console.log('指向');
                $(this).addClass('hover');
            }, function () {
                console.log('離開');
                $(this).removeClass('hover');
            }, 3000);            
        })
    </script>

</head>
<body>
    <h1>
        hover事件有一個缺點:不能延時顯示<br />
        <i>delayHover</i>解決了這個問題
    </h1>

    <div id="hovertest" style="border:1px solid #ccc;  ">
        這個是hover事件 指向我看看效果
    </div>
    
    <div id="delayHover" style="margin-top:100px;">
        這個是delayHover事件 指向我看看效果  默認值500毫秒
    </div>

    <div id="delayHover1" style="">
        這個是delayHover事件 指向我看看效果 延遲3000毫秒
    </div>
</body>
</html>