码迷,mamicode.com
首页 > Web开发 > 详细

jQuery因mouseover,mouseout冒泡产生的闪烁问题

时间:2017-03-19 13:27:41      阅读:221      评论:0      收藏:0      [点我收藏+]

标签:lib   targe   ext   tar   time   blog   min   lan   art   

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

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

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

$(‘div‘).mouseout(function(){
     clearTimeout(t);
      t=setTimeout(zoomIn,400);
    }).mouseover(function(){
   if(t!=null)clearTimeout(t);
   t=null;
  }
); 

  

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

$(‘div‘).mouseout(function(){
     clearTimeout(t);
      t=setTimeout(zoomIn,400);
    }).mouseover(function(){
   if(t!=null)clearTimeout(t);
   t=null;
  }
); 

  

jquery版本 >1.4简化写法:

$(‘div‘).mouseout(function(){
     clearTimeout(t);
      t=setTimeout(zoomIn,400);
    }).mouseover(function(){
   if(t!=null)clearTimeout(t);
   t=null;
  }
); 

  

jQuery因mouseover,mouseout冒泡产生的闪烁问题

标签:lib   targe   ext   tar   time   blog   min   lan   art   

原文地址:http://www.cnblogs.com/as3lib/p/6580013.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!