由于浏览器的冒泡行为。造成如果在一个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. 怎样在linux下对U盘进行格式化和分区

    说明,为了不做无用功,首先必须卸载要分区的设备,分区才能执行成功.通过命令umount /media/?? 或者umount /mnt/??? 看你的实际情况,这一步必不可少.1.首先通过命令fdis ...

  2. aTool在线工具

    在线HTTP POST/GET接口测试工具 - aTool在线工具 地址:http://www.atool.org/httptest.php在线接口测试工具接口测试是测试系统组件间接口的一种测试.接口 ...

  3. sql注入分析

    输入 1:sql为:select * from users where id = 1; 输入'测试:回显:You have an error in your SQL syntax; check the ...

  4. Spring 中好用的泛型操作API

    随着泛型用的越来越多,获取泛型实际类型信息的需求也会出现,如果用原生API,需要很多步操作才能获取到泛型,比如: ParameterizedType parameterizedType = (Para ...

  5. 使用sublime text3配置c++编译运行

    首先我们可以下载一个Dev-c++,这东西可以自己帮你配置好网上提示的那一大堆奇怪的文件... 网上博客大都在说些什么添加各种编译环境,加入sublime-build什么的..然而作为一个喜欢偷懒的人 ...

  6. Mininet实验 自定义拓扑结构

    参考:MiniNet实验2 通过Mininet学习可视化操作,可以在界面上方便的构建拓扑结构. 最新的Mininet 2.2.0内置了一个mininet可视化工具miniedit.miniedit在/ ...

  7. Mac 下安装Java

    下载:https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 打开下载的文件,出现如下 ...

  8. Chain of Responsibility(责任链)

    意图: 使多个对象都有机会处理请求,从而避免请求的发送者和接收者之间的耦合关系.将这些对象连成一条链,并沿着这条链传递该请求,直到有一个对象处理它为止. 适用性: 有多个的对象可以处理一个请求,哪个对 ...

  9. [原][译][osgearth]关于Features & Symbology (特征与符号)(OE绘制矢量几何与特殊字符)讲解(OE官方文档翻译)

    原文参考:http://docs.osgearth.org/en/latest/user/features.html 自己翻译的,本人英文水平有限,有问题看原链接,原文 20170802重置修改部分翻 ...

  10. Hadoop平台的基本组成与生态系统

    Hadoop系统运行于一个由普通商用服务器组成的计算集群上,该服务器集群在提供大规模分布式数据存储资源的同时,也提供大规模的并行化计算资源. 在大数据处理软件系统上,随着Apache Hadoop系统 ...