jQuery因mouseover,mouseout冒泡产生的闪烁问题 IE下闪烁的解决方法

分类：Javascript| 发布：camnprbubuol| 查看： | 发表时间：2013/1/6

 由于浏览器的冒泡行为。造成如果在一个DIV元素上同时定义了mouseover,mouseout的时候，当鼠标移动到DIV中的child子元素的时候，就会同时执行了两个操作mouseover和mouseout。

解决方案：阻止冒泡行为，当执行mouseover的时候不触发mouseout的操作。

 

方法1：
延迟执行（setTimeout）、取消延迟（clearTimeout），就是当mouseout的时候延迟执行，而在mouseover的时候取消延迟执行。当鼠标在DIV上边移动的时候因为延迟的执行所以mouseout一直都不会被触发。

[javascript]
  1. $('div').mouseout(function(){  
  2.       clearTimeout(t);  
  3.       t=setTimeout(zoomIn,400);  
  4.     }).mouseover(function(){  
  5.                            if(t!=null)clearTimeout(t);  
  6.                            t=null;  
  7.                  }  
  8.    );   

 

方法2：jquery(需要版本号大于1.2.2)
mouseenter和mouseleave事件IE特有的函数，使用jquery就很好的解决了兼容问题。函数的原理当第一次鼠标进入节点区域时触发，以后在节点区域内(子节点间)移动时不触发。

[javascript] 
  1. $('div').bind("mouseenter",function(){  
  2. // do something on mouseenter  
  3. });  
  4. $('div').bind("mouseleave",function(){  
  5. // do something on mouseleaver  
  6. });   

 

jquery版本 >1.4简化写法：（推荐，测试成功）

[javascript] 
 
  1. $('div').bind({  
  2.     mouseenter:function(){  
  3.         // do something on mouseenter  
  4.     },  
  5.     mouseleave:function(){  
  6.         // do something on mouseleave
  7.     }  
  8. })  

 可以参考：http://demon.tw/programming/jquery-mouseover-mouseout.html

赞
365据说看到好文章不转的人，服务器容易宕机！
标签：
原创文章如转载，请注明：转载自郑州网建-前端开发　http://camnpr.com/
本文链接：http://camnpr.com/archives/jquery-mouseover-mouseout.html

相关文章

关注本站

[+] 关注微博 留言板 WAP访问本站 订阅本站

一条新消息

小编推荐

    东东找到花花了
  • 最新评论
  • 最近访客

      热门文章

      想你所想 爱你所爱

      豫ICP备10013645号 Copyright 2009-2019 camnpr.com  
      关于我们 - 广告合作 - 免责声明 - 投诉建议