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

最新推荐文章于 2024-02-21 14:11:11 发布

bo o ya ka

最新推荐文章于 2024-02-21 14:11:11 发布

阅读量424

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/v10258/p/3259735.html

版权

关于鼠标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);