關於滑鼠hover事件及延時

滑鼠經過事件為web頁面上非常常見的事件之一。簡單的hover可以用CSS :hover偽類實現，複雜點的用js。

一般情況下，我們是不對滑鼠hover事件進行延時處理。但是，有時候，為了避免不必要的干擾，常會對滑鼠hover事件進行延時處理。所謂干擾，就是當使用者滑鼠不經意劃過摸個連結，選項卡，或是其他區域時，本沒有顯示隱藏層，或是選項卡切換，但是由於這些元素上繫結了hover事件（或是mouseover事件），且無延時，這些時間就會立即觸發，反而會對使用者進行干擾。

例如，在騰訊網首頁，幾乎對所有的滑鼠經過事件進行了延時處理，例如其選項卡：

或是其頂部的搜搜導航條，見下圖：

本文的主要內容就是展示我前幾天寫的滑鼠延遲的方法，jQuery下的方法，水平拙劣，僅供參考。本文就以騰訊網首頁搜搜搜尋欄的一些滑鼠經過效果為例項，演示jQuery下的延時處理。下圖為demo頁面的效果截圖：

您可以狠狠地點選這裡：騰訊搜搜搜尋框延遲demo

說到延時，離不開window下的setTimeout方法，本例項的jQuery方法的核心也是setTimeout。程式碼不長，完整如下：

這段程式碼的目的在於讓滑鼠經過事件和延時分離的出來，延時以及延遲的清除都已經由此方法解決了。您所要做的，就是設定延時的時間大小，以及相應的滑鼠經過或是移除事件即可。舉個簡單的例子吧，如下程式碼：

表示的含義是id為test的元素在滑鼠經過後200毫秒後彈出含有“經過我！”文字字樣的彈出框。

關於此js，您可以狠狠地點選這裡：jquery.hoverdelay.js(725位元組)

ok，現在應用到本文的例項上。

騰訊網的首頁的搜尋框上面除了滑鼠經過延時，其換膚也是值得一提的，關於換膚我之前也提過，在jQuery-馬化騰產品設計與使用者體驗的一些技術實現一文中，相應的demo頁面您可以狠狠地點選這裡：騰訊首頁個性化換膚demo頁面

首先，展示下騰訊首頁搜尋欄的主要HTML結構域程式碼：

與先首頁程式碼幾乎一致，如假包換。應用了本文沒什麼技術含量的延遲方法後，可以應用如下的程式碼實現延遲執行。

唉，慚愧，程式碼就這樣，沒什麼技術含量的，希望對有用的有用吧。“更多”的下拉滑鼠移出後1000毫秒後下拉框隱藏。

基本上都是程式碼在撐頁面，說點有用的東西吧。
hoverDelay方法共四個引數，表示意思如下：

hoverDuring       滑鼠經過的延時時間
outDuring             滑鼠移出的延時時間
hoverEvent         滑鼠經過執行的方法
outEvent          滑鼠移出執行的方法

月光大人曾說過與下面主要意思一樣的話：寫部落格三五天寫一篇重量級的文章，隔個一天兩天寫個簡單，價值度偏低的文章，是比較不錯滴。本文就屬於有湊篇數之嫌的價值相對偏低的文章。加上本身js還很稚嫩，所以本文內容的方法一般般，僅供參考。

對了，我是抱有疑問的，如何在寫jQuery外掛元件這類公共方法時將當前物件傳到設定的預設的方法中。例如本例項中，如果將當前$(this)物件傳到hoverEvent或是outEvent方法中呢，希望有高人不吝賜教。