jQuery中多個元素的Hover事件解決方案

jQuery中多個元素的Hover事件解決方案_jquery

WBOY

發布： 2016-05-16 16:44:47

原創

1640 人瀏覽過

1.需求簡介

jQuery的hover事件只是針對單個HTML元素，例如：

複製代碼程式碼如下:

$('#login').hover(fun2, fun2);

當滑鼠進入#login元素時呼叫fun1函數，離開時則呼叫fun2函數，這種API已能滿足絕大部分需求。

不過，有些時候我們希望當滑鼠進入兩個或多個元素時觸發fun1，離開他們時觸發fun2，而在這些元素間移動滑鼠並不觸發任何事件。例如兩個元素緊鄰的HTML元素，如下圖：

jQuery中多個元素的Hover事件解決方案_jquery

當滑鼠進入二者的區域時觸發fun1，離開時觸發fun2。你或許會想到用下面的方式

複製程式碼程式碼如下:

$(' trigger, #drop'),hover(fun1, fun2);

這種方式並不能滿足我們的需求，因為從#trigger進入#drop時會觸發fun2和fun1。要解決這個問題，比較簡單的方式是改變HTML結構，實作方式如下：

複製程式碼程式碼如下:

$('#container').hover(fun1, fun2);

這樣透過在父元素上綁定hover事件來實現此功能。

2.範例研究

下圖為常見的下拉式選單簡單化圖，HTML結構如下：

jQuery中多個元素的Hover事件解決方案_jquery

複製程式碼

 程式碼如下:

ul id="#nav"> 
 
下拉選單

下拉項目1
下拉項目2

下拉項3

li>

複製代碼

$('#droplist').hover(function(){ $(this).find('ul').show(); } , function(){ $(this).find('ul').hide(); });

程式碼如下: #nav li { font-size:14px; }

#nav li li { font-size:12pxx; } 3.解決方案更改HTML結構

複製代碼

代碼如下:

下拉式選單

下拉項目1
下拉項目2
下拉項3

複製程式碼程式碼如下:

程式碼如下:

控制碼

 程式碼如下:

 程式碼如下:

$. 🎜>'#trigger', 
'#drop', 
function(trg, drop){

#(drop).hide(); } ) 這樣當滑鼠進入#trigger時將#drop顯示出來，滑鼠從#trigger移如#drop時不會觸發任何事件，實際上就是講#trigger和#drop元素當做一個元素來處理。

複製程式碼


 程式碼如下:/**
* 作者：http://rainman.cnblogs.com/ 
* 日期：2014-06-06 
* 依賴：jQuery 
*/ 
$.mixhover = function() { 
// 整理參數$.mixhover($e1, $e2, handleIn, handleOut) 
var parms; 
 var length = arguments.length; 
var handleIn = arguments[length - 2]; 
var handleOut = arguments[length - 1]; 
if ($.isFunction(handleIn) & &t.Function & G. )) { 
parms = Array.prototype.slice.call(arguments, 0, length - 2); 
} else if ($.isFunction(handleOut)) { 
parms = Array.prototype.slice .call(arguments, 0, length - 1); 
handleIn = arguments[length - 1]; 
handleOut = null; 
} else { 
parms = arguments; 
} else { 
parms = arguments; ; 
handleOut = null; 
} 

// 整理參數使得elements依序對應
var elems = []; 
for (var i = 0, len = parms.length ; i elems[i] = []; 
var p = parms[i]; 
if (p.constructor === String) { 
p = $ (p); 
} 
if (p.constructor === $ || p.constructor === Array) { 
for (var j = 0, size = p.length; j elems[i].push(p[j]); 
} 
} else { 
elems[i].push(p); 
} 
 } 

// 綁定Hover事件
for (var i = 0, len = elems[0].length; i var arr = []; 
for (var j = 0, size = elems.length; j arr.push(elems[j][i]); 
} 
$._mixhover(arr, handleIn, handleOut); 
} 
}; 
$._mixhover = function(elems, handleIn, handleOut) { 
var isIn = false, timer; 
$(elems).hover( function() { 
window.clearTimeout(timer); 
if (isIn === false) { 
handleIn && handleIn.apply(elems, elems); 
isIn = true 
; 
; } 
}, 