夏日博客

A-A+

jQuery中hover事件使用方法详解

2016年01月10日 前端设计 暂无评论 阅读 6 views 次

hover事件就是 鼠标移到元素上要触发的事件了，这里我们来介绍jquery的这个事件的一些使用方法与例子吧。

hover(over,out)一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。

当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。而且，会伴随着对鼠标是否仍然处 在特定元素中的检测（例如，处在div中的图像），如果是，则会继续保持“悬停”状态，而不触发移出事件（修正了使用mouseout事件的一个常见错 误）。

参数:

over (Function) : 鼠标移到元素上要触发的函数

out (Function): 鼠标移出元素要触发的函数

示例:

鼠标悬停的表格加上特定的类

jQuery 代码:

  1. $(“td”).hover(  
  2. function () {  
  3. $(this).addClass(“hover”);  
  4. },  
  5. function () {  
  6. $(this).removeClass(“hover”);  
  7. }  
  8. );  

jQuery的hover事件只是针对单个HTML元素，例如：

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

当鼠标进入#login元素时调用fun1函数，离开时则调用fun2函数，这种API已能够满足绝大部分需求。

不过，有些时候我们希望当鼠标进入两个或多个元素“组合的区域”时触发fun1，离开他们时触发fun2，而在这些元素间移动鼠标并不触发任何事件。例如两个元素紧挨着的HTML元素.

当鼠标进入二者的“组合区”域时触发fun1，离开时触发fun2。你也许会想到使用下面的方式

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

这种方式并不能满足我们的需求，因为从#trigger进入#drop时会依次触发fun2和fun1。要解决这个问题，一种比较简单的方式是更改HTML结构，实现方式如下：

  1. <div id="container">  
  2.     <div id="trigger"></div>  
  3.     <div id="drop"></div>  
  4. </div>  
  5. $('#container').hover(fun1, fun2);  

这样通过在父元素上绑定hover事件来实现此功能。

2.示例研究

下图为常见的下拉菜单简化图，HTML结构如下：

  1. <ul id="#nav">  
  2.    
  3.     <li></li>  
  4.    
  5.     <li></li>  
  6.    
  7.     <li id="droplist">  
  8.    
  9.         <span>下拉菜单</span>  
  10.    
  11.         <ul>  
  12.    
  13.             <li>下拉项1</li>  
  14.    
  15.             <li>下拉项2</li>  
  16.    
  17.             <li>下拉项3</li>  
  18.    
  19.         <ul>  
  20.    
  21.     </li>  
  22.    
  23.     <li></li>  
  24.    
  25. </ul>  

实现的JavaScrip程序也是非常简单:

  1. $('#droplist').hover(function(){  
  2.    
  3.     $(this).find('ul').show();  
  4.    
  5. }, function(){  
  6.    
  7.     $(this).find('ul').hide();  
  8.    
  9. });  

这种实现方式逻辑清晰，但导致HTML嵌套层级过多，书写CSS时出现了许多不便。例如：

#nav li { font-size:14px; }

我们希望这段CSS为第一层li元素设置14像素字体，但是其也作用于了第二层元素，所以不得不使用下面的语句改写过来

#nav li li { font-size:12px; }

3.解决方案

更改HTML结构:

  1. <ul id="#nav">  
  2.    
  3.     <li></li>  
  4.    
  5.     <li></li>  
  6.    
  7.     <li id="trigger">下拉菜单</li>  
  8.    
  9.     <li></li>  
  10.    
  11. </ul>  
  12.    
  13. <ul id="drop">  
  14.    
  15.     <li>下拉项1</li>  
  16.    
  17.     <li>下拉项2</li>  
  18.    
  19.     <li>下拉项3</li>  
  20.    
  21. <ul>  

依次引入JS文件:

  1. <script type="text/<a href="/js_a/js.html" target="_blank">javascript</a>" src="js/jquery.js"></script>  
  2.    
  3. <script type="text/javascript" src="js/jquery.mixhover.js"></script>  

控制代码

  1. $.mixhover(  
  2.    
  3.     '#trigger',   
  4.    
  5.     '#drop',   
  6.    
  7.     function(trg, drop){  
  8.    
  9.         #(drop).show();  
  10.    
  11.     },  
  12.    
  13.     function(trg, drop){  
  14.    
  15.         #(drop).hide();  
  16.    
  17.     }  
  18.    
  19. )  

这样当鼠标进入#trigger时将#drop显示出来，鼠标从#trigger移如#drop时不会触发任何事件，实际上就是讲#trigger和#drop元素当做一个元素来处理。

jquery.mixhover.js程序如下:

  1. /** 
  2.    
  3.  * Date: 2014-06-06 
  4.  * Depend: jQuery 
  5.  */  
  6. $.mixhover = function() {  
  7.     // 整理参数 $.mixhover($e1, $e2, handleIn, handleOut)  
  8.     var parms;  
  9.     var length = arguments.length;  
  10.     var handleIn = arguments[length - 2];  
  11.     var handleOut = arguments[length - 1];  
  12.     if ($.isFunction(handleIn) && $.isFunction(handleOut)) {  
  13.         parms = Array.prototype.slice.call(arguments, 0, length - 2);  
  14.     } else if ($.isFunction(handleOut)) {  
  15.         parms = Array.prototype.slice.call(arguments, 0, length - 1);  
  16.         handleIn = arguments[length - 1];  
  17.         handleOut = null;  
  18.     } else {  
  19.         parms = arguments;  
  20.         handleIn = null;  
  21.         handleOut = null;  
  22.     }  
  23.     // 整理参数 使得elements依次对应  
  24.     var elems = [];  
  25.     for (var i = 0, len = parms.length; i < len; i++) {  
  26.         elems[i] = [];  
  27.         var p = parms[i];  
  28.         if (p.constructor === String) {  
  29.             p = $(p);  
  30.         }  
  31.         if (p.constructor === $ || p.constructor === Array) {  
  32.             for (var j = 0, size = p.length; j < size; j++) {  
  33.                 elems[i].push(p[j]);  
  34.             }  
  35.         } else {  
  36.             elems[i].push(p);  
  37.         }  
  38.     }  
  39.     // 绑定Hover事件  
  40.     for (var i = 0, len = elems[0].length; i < len; i++) {  
  41.         var arr = [];  
  42.         for (var j = 0, size = elems.length; j < size; j++) {  
  43.             arr.push(elems[j][i]);  
  44.         }  
  45.         $._mixhover(arr, handleIn, handleOut);  
  46.     }  
  47. };  
  48. $._mixhover = function(elems, handleIn, handleOut) {  
  49.     var isIn = false, timer;  
  50.     $(elems).hover(function() {  
  51.         window.clearTimeout(timer);  
  52.         if (isIn === false) {  
  53.             handleIn && handleIn.apply(elems, elems);  
  54.             isIn = true;  
  55.         }  
  56.     },  
  57.     function() {  
  58.         timer = window.setTimeout(function() {  
  59.             handleOut && handleOut.apply(elems, elems);  
  60.             isIn = false;  
  61.         }, 10);  
  62.     });  
  63. };  
标签：

给我留言