mouseover和mouseout闪烁问题
在父级元素上注册了mouseover和mouseout事件后,当鼠标移动到子元素上时,会触发父级的mouseout和mouseover事件,反复触发,形成闪烁。
原因: 一种是由于冒泡,子级的mouseover和mouseout触发了父级的mouseover和mouseout,一种是不明原因,也会造成这个现象。
解决方法:
1. setTimeout,类似于debounce处理
$('div').mouseout(function(){
clearTimeout(t);
t=setTimeout(zoomIn,400);
}).mouseover(function(){
if(t!=null)clearTimeout(t);
t=null;
}
);
2.使用jquery的mouseenter和mouseleave代替,或者使用jquery的hover方法来处理。hover方法是对mouseenter和mouseleave的封装,而mouseenter和mouseleave则是对mouseover和mouseout的封装,进行了srcElement的判断,忽略子元素的行为。
mouseover和mouseout闪烁问题的更多相关文章
- jquery的mouseover和mouseout闪烁问题
$(document).ready(function(){ $(".anli").hover( function(){ var $div = $(this); t = setInt ...
- jQuery中mouseover和mouseout冒泡产生闪烁问题
问题:在jQuery中,对元素绑定mouseover和mouseout事件时,每次移入移出该元素和子元素时,都会触发事件,从而会出现闪动的现象. 原因:浏览器的冒泡行为. 解决方案: 使用mousee ...
- mouseover和mouseout多次触发解决方法(兼容ie和firefox)(转)
在用到mouseover和mouseout事件来作为事件触发的条件,但是如果我们用做触发的元素内部有其他的元素的时候当鼠标移上的时候会反复的触发mouseover和mouseout事件,如导致菜单闪烁 ...
- mouseover,mouseout,mouseenter,mouseleave的区别
相信做前端开发的都听说过“冒泡型事件”吧,<JavaScript高级程序设计>第九章有详细的讲述,但是,在学习的时候一知半解,也没详细去理解,导致最近在工作中碰到了问题:有许多 li 标签 ...
- 鼠标 mouseover和mouseout事件
在div内想实现鼠标移入移出效果,最开始的时候是用了jquery的mouseout和mouseover事件来实现的, $('.product).mouseover(function(){ …… }). ...
- mouseover和mouseout、mouseenter和mouseleave
又一个傻傻分不清楚的东东~ 现实真是一个问题天天有的世界~本以为我对js中的事件还是比较了解的,对于早就接触的mouse事件,更是觉得得心应手了~但是现实却给了我一记重拳! 我自身工作中遇到的犯二的故 ...
- mouseover、mouseout,mouseenter、mouseleave区别
心情压抑的一天,我想好好的. mouseover与mouseenter 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件. 只有在鼠标指针穿过被选元素时,才会触发 mouseen ...
- mouseenter(fn)和mouseleave、mouseover和mouseout的的区别
$('.box1').mouseenter(function(){//穿入事件mouseenter $(this).css('background','red'); }).mouseleave(fun ...
- hover和mouseover,mouseout的区别
说道hover和mouseover,mouseout的区别,不得不联系到mouseenter,mouseleave. mouseover,mouseout是指鼠标指针在穿过/离开被选元素或其子元素时触 ...
随机推荐
- [matlab]改变矩阵的大小并保存到txt文件
要完成的任务是,加载一个保存在txt文件中的矩阵, 并把它扩大10倍,并且要再次保存回去 %加载txt文件 >load('Matrix.txt'); %扩大10倍 repmat(Matrix,r ...
- IOS开发之——自定义导航控制器
BasicNavigationViewController:UINavigationViwController /* 隐藏导航底部线条 */ -(void)viewDidLoad{ [super ...
- Core Data 概述
Core Data是一个模型层的技术.Core Data帮助你建立代表程序状态的模型层.Core Data也是一种持久化技术,它能将模型对象的状态持久化到磁盘,但它最重要的特点是:Core Data不 ...
- error C3872: "0xa0": 此字符不允许在标识符中使用
整理:这是因为直接复制代码的问题.0xa0是十六进制数,换成十进制就是160,表示汉字的开始. 解决办法:在报错的代码行检查两边的空格,用英文输入法的空格替换掉. 万恶的网络,万恶的word,这些无厘 ...
- CUDA编程学习(二)
将数据加载到GPU后,如何在grid下的block进行并行计算(一个grid包含多个block) /****How do we run code in parallel on the device** ...
- VC6.0中MFC界面换肤简例
利用VC中的MFC进行界面设计时,发现界面上的各控件无法简易地进行调整,比如字体大小.颜色.格式等. 为了改变外观,小小地美化一下,今天决定动手一试. 网上提供的库和方法不计其数,我选择了SkinMa ...
- Object C学习笔记20-结构体
在学习Object C中的过程中,关于struct的资料貌似非常少,查阅了C方面的资料总结了一些学习心得! 一. 定义结构 结构体是一种数据类型的组合和数据抽象.结构体的定义语法如下: struct ...
- 在eclipse中安装插件
1.在Eclipse中菜单help选项中选择install new software选项, 2.在work with 栏中输入 http://download.eclipse.org/releases ...
- IntellJ IDEA 所有快捷键
登录下面网站. http://www.jetbrains.com/idea/documentation/ 下载Keymap for Windows/Linux 后面的PDF文档.
- CXF 自定义拦截器
此例子来自apache cxf sample. /** * Licensed to the Apache Software Foundation (ASF) under one * or more ...