鼠标经过(hover)事件的延时处理

关于鼠标hover事件及延时

　　鼠标经过事件为web页面上最常见的事件之一。简单的hover可以用CSS :hover伪类实现，复杂点的用js。

　　一般情况下，我们是不对鼠标hover事件进行延时处理。但是，有时候，为了避免不必要的干扰，常会对鼠标hover事件进行延时处理。所谓干扰，就是当用户鼠标不经意划过摸个链接，选项卡，或是其他区域时，本没有显示隐藏层，或是选项卡切换，但是由于这些元素上绑定了hover事件（或是mouseover事件），且无延时，这些时间就会立即触发，反而会对用户进行干扰。

比较适用于类似场景：

像腾讯首页，此处选项卡：对鼠标经过事件进行了延时处理

　下面贴出实现代码

(function ($) {

    'use strict'

    $.fn.hoverdelay = function (options) {

        if (typeof options == 'string') {

            options = { feedback: options };

        }

    var settings = $.extend($.fn.hoverdelay.defaults, options || {});

    var hoverTimer, outTimer;

    return this.each(function () {

            var $own = $(this);

            $own.hover(function () {

                clearTimeout(outTimer);

                hoverTimer = setTimeout(function () {

                    settings.mouseover($own);

                }, settings.hoverdelay);

            },

            function () {

                clearTimeout(hoverTimer);

                outTimer = setTimeout(function () {

                    settings.mouseout($own);

                }, settings.hoverremove);

            });

        });

    };

    $.fn.hoverdelay.defaults = {

        hoverdelay: 3000,

        hoverremove: 50,

        mouseover: function (selector) { },

        mouseout: function (selector) { }

    };

})(jQuery);

以上代码收集自：海丁网。张鑫旭博客详细介绍了此种情况，也给出了实现方式，二者代码没什么差别，个人只是更习惯海丁网参数的命名方式。

我可是最爱用的 Camel 啊，这不科学...

巴特西

鼠标经过(hover)事件的延时处理

关于鼠标hover事件及延时

最新文章

热门文章