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()
随机推荐
- Centos下给PHP一键升级高版本7.2.0
我是在Centos下测试的,目前php版本是7.0.0,我要升级到php7.2.0,下面开始. 执行命令 # wget http://soft.vpser.net/lnmp/upgrade_php.s ...
- ubuntu18.04系统安装+基本环境配置【原创】
平台信息:PC:ubuntu18.04.i5.七彩虹GTX1060显卡.固态硬盘.机械硬盘 作者:庄泽彬(欢迎转载,请注明作者) 说明:在原本的电脑买一个独立显卡,装上去之后,出了各种问题,虽然后面勉 ...
- ArrayList扩容
jdk1.5 public ArrayList(int initialCapacity) { super(); if (initialCapacity < 0) throw new Illega ...
- 通过委托来实现异步 Delegate的BeginInvoke和EndInvoke
什么是.net的异步机制呢? 解释这个话题之前,先让我们来看看同步执行的程序 https://github.com/chucklu/Test/blob/master/DotNet4.5开发指南/并行处 ...
- python 读取位于包中的数据文件
假设你的包中的文件组织成如下: mypackage/ __init__.py somedata.dat spam.py 现在假设spam.py文件需要读取somedata.dat文件中的内容.你可以用 ...
- Win32 基本文件读写操作
https://www.cnblogs.com/Clingingboy/archive/2011/05/10/2042645.html
- PHP--------微商城实现微信授权登录
前段时间做完微商城了,来把微信商城学到的一些东西分享一下,希望对各位有所帮助. PHP做后台,先来说微信商城的授权登录吧!这个几乎都有,这个功能代码其实不多,主要是看懂文档需求. 前提:要有公众号,和 ...
- Leetcode 50
//1开始我只是按照原来快速幂的思想,当n <0 时,n变成-n,发现当n取-INTMAX时会发生越界的问题,然后在改快速幂代码的时候逐渐了解到快速幂的本质,其实位运算对快速幂来说速度加快不了多 ...
- 如果从excel表中导出insert-sql
=CONCATENATE("INSERT INTO p_act_lottery(actId,status,grantWay,createTime,invalidTime,amount,pri ...
- do-while语句和while的区别
do-while语句是一种后测试循环语句,即只有在循环体中的代码执行之后,才会测试出口条件.其实就是,代码在刚开始执行的时候,都是要先走一遍do循环体内的代码,然后在与while里面的条件进行判断,成 ...