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

曾经终败给现在 2022-08-26 13:27 344阅读 0赞

### 一、关于鼠标hover事件及延时 ###

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

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

例如，在腾讯网首页，几乎对所有的鼠标经过事件进行了延时处理，例如其选项卡：  
![腾讯首页选项卡 张鑫旭-鑫空间-鑫生活][_-_-]

或是其顶部的搜搜导航条，见下图：  
![腾讯网首页搜搜搜索栏 张鑫旭-鑫空间-鑫生活][_-_- 1]

### 二、实例及演示 ###

本文的主要内容就是展示我前几天写的鼠标延迟的方法，jQuery下的方法，水平拙劣，仅供参考。本文就以腾讯网首页搜搜搜索栏的一些鼠标经过效果为实例，演示jQuery下的延时处理。下图为demo页面的效果截图：  
![jQuery鼠标延迟demo截图 张鑫旭-鑫空间-鑫生活][jQuery_demo_ _-_-]

您可以狠狠地点击这里：[腾讯搜搜搜索框延迟demo][demo]

### 三、代码与实现 ###

说到延时，离不开window下的setTimeout方法，本实例的jQuery方法的核心也是setTimeout。代码不长，完整如下：

这段代码的目的在于让鼠标经过事件和延时分离的出来，延时以及延迟的清除都已经由此方法解决了。您所要做的，就是设定延时的时间大小，以及相应的鼠标经过或是移除事件即可。举个简单的例子吧，如下代码：

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

表示的含义是id为test的元素在鼠标经过后200毫秒后弹出含有“经过我！”文字字样的弹出框。

关于此js，您可以狠狠地点击这里：[jquery.hoverdelay.js][](725字节)

ok，现在应用到本文的实例上。

腾讯网的首页的搜索框上面除了鼠标经过延时，其换肤也是值得一提的，关于换肤我之前也提过，在[jQuery-马化腾产品设计与用户体验的一些技术实现][jQuery-]一文中，相应的demo页面您可以狠狠地点击这里：[腾讯首页个性化换肤demo页面][demo 1]

首先，展示下腾讯首页搜索栏的主要HTML结构域代码：

与先首页代码几乎一致，如假包换。应用了本文没什么技术含量的延迟方法后，可以应用如下的代码实现延迟执行。

$(".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();
                }
            });
        }
    });

唉，惭愧，代码就这样，没什么技术含量的，希望对有用的有用吧。“更多”的下拉鼠标移出后1000毫秒后下拉框隐藏。

基本上都是代码在撑页面，说点有用的东西吧。  
`hoverDelay`方法共四个参数，表示意思如下：

hoverDuring       鼠标经过的延时时间  
outDuring          鼠标移出的延时时间  
hoverEvent        鼠标经过执行的方法  
outEvent         鼠标移出执行的方法

### 四、我嚓，结语 ###

月光大人曾说过与下面主要意思一样的话：写博客三五天写一篇重量级的文章，隔个一天两天写个简单，价值度偏低的文章，是比较不错滴。本文就属于有凑篇数之嫌的价值相对偏低的文章。加上本身js还很稚嫩，所以本文内容的方法一般般，仅供参考。

对了，我是抱有疑问的，如何在写jQuery插件组件这类公共方法时将当前对象传到设置的默认的方法中。例如本实例中，如果将当前$(this)对象传到hoverEvent或是outEvent方法中呢，希望有高人不吝赐教。

原创文章，转载请注明来自[张鑫旭-鑫空间-鑫生活][-_-]\[[http://www.zhangxinxu.com][-_-]\]  
本文地址：[http://www.zhangxinxu.com/wordpress/?p=906][http_www.zhangxinxu.com_wordpress_p_906]

（本篇完）

[_-_-]: /images/20220824/fb41028313bc47e1a1a3454bed81dcda.png
[_-_- 1]: /images/20220824/e1400fd4d4804d26912b6ec76f4d80f9.png
[jQuery_demo_ _-_-]: /images/20220824/b0f6fc14818549b2a0ea97cb59193065.png
[demo]: http://www.zhangxinxu.com/study/201006/jquery-hover-event-delay.html
[jquery.hoverdelay.js]: http://www.zhangxinxu.com/study/js/jquery.hoverdelay.js
[jQuery-]: http://www.zhangxinxu.com/wordpress/?p=409
[demo 1]: http://www.zhangxinxu.com/study/200912/qq-home-page-skin-jquery.html
[-_-]: http://www.zhangxinxu.com/
[http_www.zhangxinxu.com_wordpress_p_906]: http://www.zhangxinxu.com/wordpress/?p=906