在父级元素上注册了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闪烁问题的更多相关文章

  1. jquery的mouseover和mouseout闪烁问题

    $(document).ready(function(){ $(".anli").hover( function(){ var $div = $(this); t = setInt ...

  2. jQuery中mouseover和mouseout冒泡产生闪烁问题

    问题:在jQuery中,对元素绑定mouseover和mouseout事件时,每次移入移出该元素和子元素时,都会触发事件,从而会出现闪动的现象. 原因:浏览器的冒泡行为. 解决方案: 使用mousee ...

  3. mouseover和mouseout多次触发解决方法(兼容ie和firefox)(转)

    在用到mouseover和mouseout事件来作为事件触发的条件,但是如果我们用做触发的元素内部有其他的元素的时候当鼠标移上的时候会反复的触发mouseover和mouseout事件,如导致菜单闪烁 ...

  4. mouseover,mouseout,mouseenter,mouseleave的区别

    相信做前端开发的都听说过“冒泡型事件”吧,<JavaScript高级程序设计>第九章有详细的讲述,但是,在学习的时候一知半解,也没详细去理解,导致最近在工作中碰到了问题:有许多 li 标签 ...

  5. 鼠标 mouseover和mouseout事件

    在div内想实现鼠标移入移出效果,最开始的时候是用了jquery的mouseout和mouseover事件来实现的, $('.product).mouseover(function(){ …… }). ...

  6. mouseover和mouseout、mouseenter和mouseleave

    又一个傻傻分不清楚的东东~ 现实真是一个问题天天有的世界~本以为我对js中的事件还是比较了解的,对于早就接触的mouse事件,更是觉得得心应手了~但是现实却给了我一记重拳! 我自身工作中遇到的犯二的故 ...

  7. mouseover、mouseout,mouseenter、mouseleave区别

    心情压抑的一天,我想好好的. mouseover与mouseenter 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件. 只有在鼠标指针穿过被选元素时,才会触发 mouseen ...

  8. mouseenter(fn)和mouseleave、mouseover和mouseout的的区别

    $('.box1').mouseenter(function(){//穿入事件mouseenter $(this).css('background','red'); }).mouseleave(fun ...

  9. hover和mouseover,mouseout的区别

    说道hover和mouseover,mouseout的区别,不得不联系到mouseenter,mouseleave. mouseover,mouseout是指鼠标指针在穿过/离开被选元素或其子元素时触 ...

随机推荐

  1. 使用Uploadify实现上传图片生成缩略图例子,实时显示进度条

    不了解Uploadify的,先看看前一篇详细说明 http://www.cnblogs.com/XuebinDing/archive/2012/04/26/2470995.html Uploadify ...

  2. Android -- Properties使用

    import java.io.FileInputStream; import java.io.FileOutputStream; import java.util.Properties; public ...

  3. JS闭包的理解

    闭包的两个特点: 1.作为一个函数变量的一个引用 - 当函数返回时,其处于激活状态.2.一个闭包就是当一个函数返回时,一个没有释放资源的栈区. 其实上面两点可以合成一点,就是闭包函数返回时,该函数内部 ...

  4. Convert和Parse对null值处理的区别

    类型的转换在日常的变成中是经常被用到的,我们最常用的类型转换的方法就是Convert和Parse, 下面来说一下这两者null值处理的区别. int i1 = Convert.ToInt32(null ...

  5. Spring的BeanPostProcesser接口介绍

    前言 废话不多说,直接进入主题. 同学们有想过这么一种情况吗:Spring容器提供给我们的一些接口实现类并不能满足我们的要求,但是我们又不想重新写一个类,只想在原来类上修改一些属性? 举个例子,Spr ...

  6. TCP的三次握手和四次挥手

    置顶文章:<纯CSS打造银色MacBook Air(完整版)> 上一篇:<两个简单的Loading> 作者主页:myvin 博主QQ:851399101(点击QQ和博主发起临时 ...

  7. Object C学习笔记19-枚举

    一. 枚举类型 枚举类型是一个基本类型,不能再分为为任何其他的类型.在一般的编程语言中都有枚举(enum)这种数据结构类型.枚举类型主要用于将一个变量限定在特定的范围内.比如一周有七天,那么一周的值就 ...

  8. Linq 中查询一个表中指定的字段

    //Linq中查询一个表中指定的几个字段: ); // FindAllItems()为查询对应表的所有数据的方法: // Where 里面为查询条件 // Select 为查询的筛选条件 new{} ...

  9. SequoiaDB 系列之三 :SequoiaDB的高级功能

    上一篇简单描述了一下SequoiaDB的简单CRUD操作,本篇将讲述一下稍微高级点的功能. 部署在我机器上的集群环境,在经过创建名字为"foo"的cs,创建名字为"bar ...

  10. Nodejs学习笔记(七)--- Node.js + Express 构建网站简单示例

    目录 前言 新建项目.建立数据库以及其它准备工作 新建express + ejs 项目:sampleEjs 创建数据库 修改package.json文件,安装session和mysql模块 样式和JQ ...