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冒泡产生的闪烁问题的更多相关文章
- jQuery mouseover,mouseout事件多次执行的问题处理
控制鼠标移上移下事件,在使用Jquery 的mouseover,mouseout事件时,元素内部含有其它元素,会造成该事件多次的触发的情况. 问题解析 在用到mouseover和mouseout事件来 ...
- jquery的hover mouseover mouseout mouseenter mouseleave的区别
jquery的hover mouseover mouseout mouseenter mouseleave的区别 1.mouseover mouseout mouseover - 鼠标指针经过任何子元 ...
- mouseover,mouseout,mouseenter,mouseleave的区别
1.前言 今天下午参加一个面试,对方问我写不写博客,这时候才猛然意识到好久没写东西了.最近一直在外边实习,每天有很多经历和挑战,但是却没有及时地记录下来,这一点必须得批评自己,以后得经常把自己遇到的问 ...
- jquery中mouseover和mouseenter的区别
jquery中mouseover和mouseenter的区别 一.总结 一句话总结: 见名知意:enter(进入)和over(在上方)的意思好好思考一下 mouseover就是从子元素回到自己的时候也 ...
- ie8下$(document).on('mouseover mouseout','ul li',function(){})的bug
$(document).on('mouseover mouseout','ul li',function(){ if (event.type == 'mouseover') { c ...
- 关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
轮播中大多会选择mouseover和mouseout 这个时候是没有任何问题的 但当遇到有css3动画的时候,会发现移入移出过快 动画还没加载完成就需要执行下一个动画,完了动画样式就错乱了. 这时候 ...
- mouseover,mouseout和mouseenter,mouseleave的区别及适用情况
在做类似于百度地图右下角,不同地图切换UI时,遇到了问题. 就是鼠标滑过的时候出现一个层,当鼠标滑到当前层的话mouseover和mouseout在低版本的浏览器会出现闪动的现象,最简单的那就是把mo ...
- mouseover&mouseout和mouseenter&mouseleave
mouseenter&mouseleave: 进入被选元素触发,进入被选元素的子元素不会重复触发. mouseover&mouseout: 进入被选元素触发,从被选元素进入其子元素会再 ...
- jquery中怎样防止冒泡事件
jquery中怎样防止冒泡事件 1.利用event.stopPropagation() 2.利用return false 3.利用event.preventDefault()
随机推荐
- 【转载】IEEE754 学习总结
以下是参考<IEEE754 学习总结>并结合自己学习总结 一:前言二:预备知识 三:浮点数的表示范围四:将浮点格式转换成十进制数 一:前言 前不久在分析一个程序的过程中遇到了浮点运算,也就 ...
- 分布式session的管理
在分布式架构或微服务架构下,必须保证一个应用服务器上保存Session后,其它应用服务器可以同步或共享这个Session,可能会出现在A1系统登录后创建并保存Session,再次发起请求,请求被转发到 ...
- Vue学习笔记之Vue的模板字符串
0x00 模板字符串 传统的JavaScript语言,输出模板通常是这样的写的. $('#result').append( 'There are <b>' + basket.count + ...
- Kali2018.1
目录 制作U盘启动盘 安装 Kali Linux 之后的事 更新源 配置 Zsh 配置 Vim 修改 Firefox 语言为中文 安装 Gnome 扩展 美化 安装 Google 拼音输入法 安装常用 ...
- [转]Python的getattr(),setattr(),delattr(),hasattr()
getattr()函数是Python自省的核心函数,具体使用大体如下: 获取对象引用getattrGetattr用于返回一个对象属性,或者方法 class A: def __init__(self): ...
- H5 canvas控制坦克移动2
接着上一篇(http://www.cnblogs.com/zhouhuan/p/H5_tankgame2.html),这篇主要修复两个bug,第一,玩家按下方向键时,坦克的炮筒应该指向相应的方向,并向 ...
- URI,URL与URN的区别
2017-11-13 16:51:49 URI = Universal Resource Identifier 统一资源标志符 URL = Universal Resource Locator 统一资 ...
- ObservableCollection<T> 的同类 ListCollectionView
1:ListCollectionView : CollectionView : INotifyCollectionChanged, INotifyPropertyChanged 2:Observab ...
- java.lang.NoSuchMethodError: org.springframework.core.io.ResourceEditor
这种情况一般是jar包版本问题,pom导入的jar包存在一个2.5.6的,删掉即可.
- type使用细则
CREATE OR REPLACE TYPE ADDRESS_TYPE --创建类型 ADDRESS_TYPE AS OBJECT(ZIP VARCHAR2(6),PROVINCE VARCHAR ...