由于浏览器的冒泡行为。造成如果在一个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冒泡产生的闪烁问题的更多相关文章

  1. jQuery mouseover,mouseout事件多次执行的问题处理

    控制鼠标移上移下事件,在使用Jquery 的mouseover,mouseout事件时,元素内部含有其它元素,会造成该事件多次的触发的情况. 问题解析 在用到mouseover和mouseout事件来 ...

  2. jquery的hover mouseover mouseout mouseenter mouseleave的区别

    jquery的hover mouseover mouseout mouseenter mouseleave的区别 1.mouseover mouseout mouseover - 鼠标指针经过任何子元 ...

  3. mouseover,mouseout,mouseenter,mouseleave的区别

    1.前言 今天下午参加一个面试,对方问我写不写博客,这时候才猛然意识到好久没写东西了.最近一直在外边实习,每天有很多经历和挑战,但是却没有及时地记录下来,这一点必须得批评自己,以后得经常把自己遇到的问 ...

  4. jquery中mouseover和mouseenter的区别

    jquery中mouseover和mouseenter的区别 一.总结 一句话总结: 见名知意:enter(进入)和over(在上方)的意思好好思考一下 mouseover就是从子元素回到自己的时候也 ...

  5. ie8下$(document).on('mouseover mouseout','ul li',function(){})的bug

    $(document).on('mouseover mouseout','ul li',function(){ if (event.type == 'mouseover') {           c ...

  6. 关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别

    轮播中大多会选择mouseover和mouseout  这个时候是没有任何问题的 但当遇到有css3动画的时候,会发现移入移出过快 动画还没加载完成就需要执行下一个动画,完了动画样式就错乱了. 这时候 ...

  7. mouseover,mouseout和mouseenter,mouseleave的区别及适用情况

    在做类似于百度地图右下角,不同地图切换UI时,遇到了问题. 就是鼠标滑过的时候出现一个层,当鼠标滑到当前层的话mouseover和mouseout在低版本的浏览器会出现闪动的现象,最简单的那就是把mo ...

  8. mouseover&mouseout和mouseenter&mouseleave

    mouseenter&mouseleave: 进入被选元素触发,进入被选元素的子元素不会重复触发. mouseover&mouseout: 进入被选元素触发,从被选元素进入其子元素会再 ...

  9. jquery中怎样防止冒泡事件

    jquery中怎样防止冒泡事件 1.利用event.stopPropagation() 2.利用return false 3.利用event.preventDefault()

随机推荐

  1. 如何有规律的备份 WordPress 博客(转)

    转自:http://blog.wpjam.com/m/backup-your-blog-regularly/   我们都知道备份 WordPress 博客应该是规律性的操作,但是事实上往往我们都会因为 ...

  2. confluence wiki 安装

    1. 下载 wget https://www.atlassian.com/software/confluence/downloads/binary/atlassian-confluence-5.6.6 ...

  3. ubuntu18.04系统安装+基本环境配置【原创】

    平台信息:PC:ubuntu18.04.i5.七彩虹GTX1060显卡.固态硬盘.机械硬盘 作者:庄泽彬(欢迎转载,请注明作者) 说明:在原本的电脑买一个独立显卡,装上去之后,出了各种问题,虽然后面勉 ...

  4. ExtJS清除表格缓存

    背景 在使用ExtJS时遇到不少坑,如果不影响使用也无所谓,但是有些不能忍的,比如表格数据缓存问题.如果第一次打开页面查询出一些数据展示在表格中:第二次打开,即使不查询也会有数据,这是缓存的数据. 我 ...

  5. vim 录制宏,自动循环执行组合操作

    前言 在 vim 中录制宏的意思就是把一段操作录制下来,然后可以重复执行.打个比方,我有一个文本,一共 50000 行,我要在每一行后面加一个英文句号.这个操作如果手动做的话效率非常低.这时候我可以这 ...

  6. SQL 触发器的缺点 坏处 弊端 哼╭(╯^╰)╮

    (自己总结,有误请不吝赐教) 1.如果触发频率高,占用内存,降低数据访问速度 2.相对不灵活,一旦触发马上执行,不能排除特殊情况 3.一定程度上打乱代码结构,相关的代码都需要特别注释,否则造成阅读和维 ...

  7. 10_MySQL DQL_子查询(嵌套的select)

    #子查询/* 含义:出现在其他语句中的select语句,称为子查询(内查询)           内部嵌套其他select语句的查询,称为主查询(外查询) 特点: 1.子查询都会放在小括号内 2.单行 ...

  8. adb 安装软件

    一.连接 adb connect 192.168.1.10 输出 connected to 二.查看设备 adb devices 输出 List of devices attached device ...

  9. 递归--练习10--noi1696逆波兰表达式

    递归--练习10--noi1696逆波兰表达式 一.心得 递归大法好 二.题目 1696:逆波兰表达式 总时间限制:  1000ms 内存限制:  65536kB 描述 逆波兰表达式是一种把运算符前置 ...

  10. uva10655矩阵快速幂

    a^(n+2)+b^(n+2)=(a+b)*(a^(n+1)+b^(n+1))-a*b*(a^n+b^n) 坑爹的题目关系式都推出来了居然还是wa了..... 不能只看p,q=0就退出,因为a,b不一 ...