首页 > 代码库 > jQuery因mouseover,mouseout冒泡产生的闪烁问题
jQuery因mouseover,mouseout冒泡产生的闪烁问题
由于浏览器的冒泡行为。造成如果在一个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冒泡产生的闪烁问题
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。