首页 > 鼠标键盘 >

[Web前端] jQuery延迟的悬停事件处理

电脑杂谈　发布时间：2020-09-05 03:05:14　来源：网络整理

赛睿鼠标玩lol画面一卡一卡的,换一个鼠标就不会_小米鼠标休眠时间_鼠标经过时间

一、关于鼠标悬停事件和延迟

鼠标通过事件是网页上非常常见的事件之一。可以使用CSS：hover伪类实现简单的悬停，而使用js可以实现更复杂的悬停。

在正常情况下，我们不会延迟鼠标悬停事件的处理。但是，有时为了避免不必要的干扰，鼠标悬停事件通常会延迟。所谓干扰是指用户无意间滑动链接，选项卡或其他区域，不显示隐藏层或切换选项卡，而是因为这些元素绑定到悬停事件（或鼠标悬停事件）），并且没有延迟，这些时间将立即触发，但会干扰用户。

例如，在Tencent.com主页上，几乎所有鼠标通过事件都会延迟处理，例如其选项卡：

腾讯首页选项卡张鑫旭-鑫空间-鑫生活

或顶部的搜索导航栏，请参见下图：

腾讯网首页搜搜搜索栏张鑫旭-鑫空间-鑫生活

小米鼠标休眠时间_赛睿鼠标玩lol画面一卡一卡的,换一个鼠标就不会_鼠标经过时间

二、示例和演示

本文的主要内容是展示我几天前编写的鼠标延迟方法。 jQuery下的方法很尴尬，仅供参考。本文以Tencent.com主页上的搜索栏中的一些鼠标传递效果为例，以演示jQuery下的延迟处理。下图是演示页面的屏幕截图：

jQuery鼠标延迟demo截图张鑫旭-鑫空间-鑫生活

您可以点击此处：腾讯搜索搜索框延迟演示

三、代码和实现

说到延迟，它与窗口下的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);

小米鼠标休眠时间_鼠标经过时间_赛睿鼠标玩lol画面一卡一卡的,换一个鼠标就不会

此代码的目的是将鼠标与事件和延迟分开。通过该方法解决了延迟和延迟的清除。您所要做的就是设置延迟时间以及相应的鼠标通过或移除事件。举一个简单的例子，下面的代码：

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

表示ID为test的元素将弹出一个带有“ Pass Me！”字样的弹出框。鼠标经过200毫秒后。

关于此js，您可以单击此处：jquery.hoverdelay.js（725字节）

好，现在适用于本文的示例。

除了鼠标在腾讯网站首页上的搜索框上出现延迟外，其外观也值得一提。在有关jQuery-Ma Huateng产品设计和用户体验的文章中，我还提到了外观。，相应的演示页面，您可以单击此处：腾讯首页个性化皮肤演示页面

首先，在腾讯首页上显示搜索栏的主要HTML域代码：

小米鼠标休眠时间_赛睿鼠标玩lol画面一卡一卡的,换一个鼠标就不会_鼠标经过时间

与第一个首页代码几乎相同，例如假冒替换。在本文中应用了几乎没有技术内容的延迟方法之后，您可以应用以下代码来实现延迟执行。

$(".s2").each(function(){
$("#sosoFod h3").each(function(){
    var that = $(this);
    var id = that.attr("id");
    if(id){
        that.hoverDelay({
            hoverEvent: function(){
                $(".s1").attr("class","s2");
                that.attr("class","s1"); //感谢“type23”提供了绑定对象方法
                $(this).attr("class","s1");
            }
        });
    }else{
        that.hoverDelay({
            outDuring: 1000,
            hoverEvent: function(){
                $("#tm").show();
            },
            outEvent: function(){
                $("#tm").hide();
            }
        });
    }
});

哦，我很as愧，代码就是这样，没有技术内容，希望对有用的东西有用。移出鼠标1000毫秒后，“更多”下拉框将隐藏。

基本上，代码支持页面，所以让我们谈谈有用的东西。

hoverDelay方法中有四个参数，表示以下内容：

悬停在鼠标通过的延迟时间内

鼠标经过时间_小米鼠标休眠时间_赛睿鼠标玩lol画面一卡一卡的,换一个鼠标就不会