在父级元素上注册了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. C#报错:创建调试信息文件 ……obj\Debug\model.pdb: 拒绝访问

    错误:创建调试信息文件“.......\obj\Debug\model.pdb”时发生错误 --“......\obj\Debug\model.pdb: 拒绝访问. 解决办法如下: 删除该项目下的 b ...

  2. AS2.0大步更新 Google强势逆天

    New Features in Android Studio 2.0Instant Run: Faster Build & Deploy逆天吗?你还在羡慕iOS的playground吗?And ...

  3. Linux常用指令---tar | zip (解压缩)

    减少文件大小有两个明显的好处,一是可以减少存储空间,二是通过网络传输文件时,可以减少传输的时间.gzip是在Linux系统中经常使用的一个对文件进行压缩和解压缩的命令,既方便又好用.gzip不仅可以用 ...

  4. IOS开发之——Masonry 只支持OC,暂不支持swift

    前言 1 MagicNumber -> autoresizingMask -> autolayout 以上是纯手写代码所经历的关于页面布局的三个时期 在iphone1-iphone3gs时 ...

  5. EF实体框架之CodeFirst二

    在codefirst一中也说了Mapping是实体与数据库的纽带,model通过Mapping映射到数据库,我们可以从数据库的角度来分析?首先是映射到数据库,这个是必须的.数据库里面一般包括表.列.约 ...

  6. 公司ERP系统重构那些事

    记一次会议,我提出插件化的想法,有支持也有反对,其中"系统架构师"表示插件化后的项目没什么意义,今天来讨论项目是否需要插件化的一些观点. 项目背景 公司内部"ERP&qu ...

  7. commonjs amd cmd的区别

    一篇博客告诉你三者的区别:http://zccst.iteye.com/blog/2215317 告诉你三者同requirejs seajs的区别:http://blog.chinaunix.net/ ...

  8. ajax请求模拟登录

    前台 @if (Session["username"] != null) { <div class="login"> <span style= ...

  9. 22.C#分组和查询延续及选择综合症(十一章11.6-11.7)

    对于昨天的连接还有一个知识点没有说,那就是分组连接.是11.5中的内容,补上. 分组连接的格式:join 元素 in 序列 on 条件表达式 into 新的序列 内连接和分组连接之间的一个重要差异(即 ...

  10. 用wcf实现带有“秒传”功能的网盘

    写在前面 前面记录过这样一个关于“秒传”的实现思路,在这篇就弄了一个简单的demo实现了一下,当中有很多业务仍没考虑,只是将“秒传”的实现思路,用代码实现了一下. 关于秒传,可以参考这篇文章:何为“秒 ...