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()
随机推荐
- 理解Linux系统中的load average(图文版)
本文转自:http://heipark.iteye.com/blog/1340384 一.什么是load average? linux系统中的Load对当前CPU工作量的度量 (WikiPedia: ...
- Git冲突:commit your changes or stash them before you can merge. 解决办法
用git pull来更新代码的时候,遇到了下面的问题: 1 2 3 4 error: Your local changes to the following files would be overwr ...
- springcloud11----turbine
package com.itmuch.cloud; import org.springframework.boot.SpringApplication; import org.springframew ...
- HTTP从入门到入土(3)——TCP三次握手
TCP三次握手 客户端与服务器之间互相发送HTTP请求响应之前需要先进行TCP连接,因为HTTP是一个无连接.无状态协议,不存在连接的概念,只有请求和响应的概念.而请求和响应实际上只是数据包,他们需要 ...
- ubuntu14.04 安装apache+mysql+php
1.安装apache sudo apt-get update sudo apt-get install apache2 这时http://你机器的ip,就可以访问了. 2.安装mysql sudo a ...
- foo、bar美国版的张三李四
不管看javascript还是其他语言举例,经常看到使用foo和bar来充当变量.那么究竟foo.bar是什么鬼? 一说:foo 和 bar 组合在一起所构成的 foobar 应该最能反映其原始的意思 ...
- 20145326《Java程序设计》第一周学习总结
20145326<Java程序设计>第一周学习总结 教材学习内容总结 转眼间新的一学期终于开始了!为什么我这么期待呢?因为这学期可以上娄嘉鹏老师的java程序设计课,我不是什么电脑天才,之 ...
- 【Rpc】基于开源Dubbo分布式RPC服务框架的部署整合
一.前言 Dubbo 作为SOA服务化治理方案的核心框架,用于提高业务逻辑的复用.整合.集中管理,具有极高的可靠性(HA)和伸缩性,被应用于阿里巴巴各成员站点,同时在包括JD.当当在内的众多互联网项目 ...
- HDU 3572 Task Schedule(最大流判断满流)
https://vjudge.net/problem/HDU-3572 题意: 有N个作业和M台机器,每个作业都有一个持续时间P,工作的日期为S~E.作业可以断断续续的在不同机器上做,每台机器每次只可 ...
- platforms
1.Qt551x86_vs2013 所有的 platforms文件夹 的路径: 1.1.E:\ZC_ProgramFiles_161104\Qt551_vs2013\5.5\msvc2013\plug ...