1.需求簡介
#2. 範例研究
3.解決方案
jQuery的hover事件只是針對單一HTML元素,例如:
$('#login').hover(fun2, fun2);
當滑鼠進入#login元素時呼叫fun1函數,離開時則呼叫fun2函數,這種API已能夠滿足絕大部分需求。
不過,有些時候我們希望當滑鼠進入兩個或多個元素「組合的區域」時觸發fun1,離開他們時觸發fun2,而在這些元素間移動滑鼠並不觸發任何事件。例如兩個元素緊鄰的HTML元素,如下圖:
當滑鼠進入二者的「組合區」域時觸發fun1,離開時觸發fun2。你或許會想到使用下面的方式
$('#trigger, #drop'),hover(fun1, fun2);
這種方式並不能滿足我們的需求,因為從#trigger進入#drop時會依次觸發fun2和fun1。要解決這個問題,比較簡單的方式是更改HTML結構,實作方式如下:
<p id="container"> <p id="trigger"></p> <p id="drop"></p> </p> $('#container').hover(fun1, fun2);
這樣透過在父元素上綁定hover事件來實現此功能。
下圖為常見的下拉選單簡化圖,HTML結構如下:
##
<ul id="#nav"> <li></li> <li></li> <li id="droplist"> <span>下拉菜单</span> <ul> <li>下拉项1</li> <li>下拉项2</li> <li>下拉项3</li> <ul> </li> <li></li> </ul>實作的JavaScrip程式也是非常簡單
$('#droplist').hover(function(){ $(this).find('ul').show(); }, function(){ $(this).find('ul').hide(); });這種實作方式邏輯清晰,但導致HTML嵌套層級過多,書寫CSS時出現了許多不便。例如:
#nav li { font-size:14px; }我們希望這段CSS為第一層li元素設定14像素字體,但是其也作用於了第二層元素,所以不得不使用下面的語句改寫過來
#nav li li { font-size:12px; }3.解決方案更改HTML結構
<ul id="#nav"> <li></li> <li></li> <li id="trigger">下拉菜单</li> <li></li> </ul> <ul id="drop"> <li>下拉项1</li> <li>下拉项2</li> <li>下拉项3</li> <ul>依序引入JS檔案
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.mixhover.js"></script>控製程式碼
$.mixhover( '#trigger', '#drop', function(trg, drop){ #(drop).show(); }, function(trg, drop){ #(drop).hide(); } )這樣當滑鼠進入#trigger時將#drop顯示出來,滑鼠從#trigger移如#drop時不會觸發任何事件,其實就是講#trigger和#drop元素當做一個元素來處理。 jquery.mixhover.js程式如下
/** * Author: http://rainman.cnblogs.com/ * Date: 2014-06-06 * Depend: 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) && $.isFunction(handleOut)) { 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; handleIn = null; handleOut = null; } // 整理参数 使得elements依次对应 var elems = []; for (var i = 0, len = parms.length; i < len; 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 < size; j++) { elems[i].push(p[j]); } } else { elems[i].push(p); } } // 绑定Hover事件 for (var i = 0, len = elems[0].length; i < len; i++) { var arr = []; for (var j = 0, size = elems.length; j < size; 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; } }, function() { timer = window.setTimeout(function() { handleOut && handleOut.apply(elems, elems); isIn = false; }, 10); }); };
以上是jQuery中關於多個元素的Hover事件範例程式碼詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!