快捷導(dǎo)航

鼠標(biāo)事件延時切換插件

更新時間：2011年03月12日 19:10:06 作者：

為了防止誤操作，很多時候需要對鼠標(biāo)滑過觸發(fā)的事件進行延時處理。網(wǎng)易首頁的選項卡好幾年之前就添加了這個特性，當(dāng)時我記得是采用150毫秒作為觸發(fā)基準(zhǔn)

原理很簡單：
onmouseover、onmouseout執(zhí)行業(yè)務(wù)代碼時使用setTimeout進行延時，第二次觸發(fā)的時候先清除掉前面的setTimeout。
原理

 
var timer; 
document.getElementById('test').onmouseover = function () { 
clearTimeout(timer); 
timer = setTimeout(function () { 
alert('over') 
}, 150); 
}; 
document.getElementById('test').onmouseout = function () { 
clearTimeout(timer); 
timer = setTimeout(function () { 
alert('out') 
}, 150); 
}; 

上述代碼可以看到，定時器返回值(唯一ID)由timer保存著，onmouseover與onmouserout都可以清除未執(zhí)行的定時器，防止重復(fù)執(zhí)行。這里timer讓onmouseover與onmouserout有了一個“組”的概念，我們還可以讓更多的元素能夠訪問到“組”，例如插入式的下拉菜單與tips等觸發(fā)元素與彈出層都需要共用同一個timer，這樣不會因為鼠標(biāo)離開導(dǎo)致層被關(guān)閉（只要指針還在層上）。
封裝事件

復(fù)制代碼代碼如下:

 
/*! 
* hoverDelay.js 
* http://www.planeArt.cn 
* Copyright 2011, TangBin 
* Dual licensed under the MIT or GPL Version 2 licenses. 
*/ 
(function (pluginName) { 
var id = 0, data = {}, 
addEvent = function (elem, type, callback) { 
if (elem.addEventListener) { 
elem.addEventListener(type, callback, false); 
} else { 
elem.attachEvent('on' + type, function () {callback.call(elem)}); 
}; 
}; 
this[pluginName] = function (elem, over, out, group, speed) { 
id ++; 
if (arguments.length === 0) return id; 
if (typeof arguments[1] !== 'function') return clearTimeout(data[arguments[1]]); 
if (typeof elem === 'string') elem = document.getElementById(elem); 
group = group || elem[pluginName] || id; 
speed = speed || 150; 
elem[pluginName] = group; 
addEvent(elem, 'mouseover', function () { 
var elem = this, 
fn = function () {over.call(elem)}; 
clearTimeout(data[group]); 
data[group] = setTimeout(fn, speed); 
}); 
addEvent(elem, 'mouseout', function () { 
var elem = this, 
fn = function () {out.call(elem)}; 
clearTimeout(data[group]); 
data[group] = setTimeout(fn, speed); 
}); 
}; 
})('hoverDelay'); 

data負(fù)責(zé)保存著自定義的“組”，同一“組”下甚至可以暫停mouseout的回調(diào)函數(shù)執(zhí)行，這樣可以實現(xiàn)套嵌操作。

接口說明

方法	參數(shù)	作用
hoverDelay (elem, over, out, group)	元素, 鼠標(biāo)靠近時回調(diào)函數(shù), 鼠標(biāo)離開時回調(diào)函數(shù), 設(shè)置延時分組名稱[可選]	設(shè)置延時觸發(fā)效果
hoverDelay (elem, group)	元素, 延時分組名稱	停止鼠標(biāo)離開執(zhí)行的回調(diào)函數(shù)
hoverDelay ()	[無]	獲取唯一延時分組名稱

2011-01-22更新
我注意到j(luò)Query API中關(guān)于hover事件的說明：
會伴隨著對鼠標(biāo)是否仍然處在特定元素中的檢測（例如，處在div中的圖像），如果是，則會繼續(xù)保持“懸?！睜顟B(tài)，而不觸發(fā)移出事件（修正了使用mouseout事件的一個常見錯誤）。
mouseout有BUG？這讓我想起了我曾經(jīng)工作中制作一個鼠標(biāo)觸發(fā)顯示名片（類似騰訊微博的頭像名片）經(jīng)常被錯誤的執(zhí)行了mouseout事件。于是我又查閱了jQuery的hover源碼如何解決這個問題，發(fā)現(xiàn)它是使用“mouseenter”與“mouseleave”代替了“mouseover”與“mouseout”，“mouseenter”與“mouseleave”是IE(6、7、8)特有的的事件，標(biāo)準(zhǔn)瀏覽器并不支持，需要進行模擬，最終版本：

復(fù)制代碼代碼如下:

 
/*! 
* hoverDelay.js v1.1 
* http://www.planeArt.cn 
* Copyright 2011, TangBin 
* Dual licensed under the MIT or GPL Version 2 licenses. 
*/ 
(function (pluginName) { 
var id = 0, data = {}, 
addEvent = function (elem, type, callback) { 
if (elem.addEventListener) { 
if (type === 'mouseenter') { 
elem.addEventListener('mouseover', withinElement(callback), false); 
} else if (type === 'mouseleave') { 
elem.addEventListener('mouseout', withinElement(callback), false); 
} else { 
elem.addEventListener(type, callback, false); 
}; 
} else { 
elem.attachEvent('on' + type, function () {callback.call(elem, window.event)}); 
}; 
}, 
withinElement = function(callback) { 
return function (event) { 
var parent = event.relatedTarget; 
try { 
while (parent && parent !== this) parent = parent.parentNode; 
if (parent !== this) callback.apply(this, arguments); 
} catch(e) {}; 
}; 
}; 
this[pluginName] = function (elem, over, out, group, speed) { 
id ++; 
if (arguments.length === 0) return id; 
if (typeof arguments[1] !== 'function') return clearTimeout(data[arguments[1]]); 
if (typeof elem === 'string') elem = document.getElementById(elem); 
group = group || elem[pluginName] || id; 
speed = speed || 150; 
elem[pluginName] = group; 
addEvent(elem, 'mouseenter', function () { 
var elem = this, 
fn = function () {over.call(elem)}; 
clearTimeout(data[group]); 
data[group] = setTimeout(fn, speed); 
}); 
addEvent(elem, 'mouseleave', function () { 
var elem = this, 
fn = function () {out.call(elem)}; 
clearTimeout(data[group]); 
data[group] = setTimeout(fn, speed); 
}); 
}; 
})('hoverDelay'); 