在父级元素上注册了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. Linux经常用到的命令

    1. Linux下用vim打开配置文件乱码,在终端输入:“LANG=”即可. 2. 查看端口是否被占用: 3. netstat -anp | grep port netstat -ltn 4. lso ...

  2. 淘宝SKU组合查询算法实现

    淘宝SKU组合查询算法实现 2015-11-14 16:18 1140人阅读 评论(0) 收藏 举报  分类: JavaScript(14)    目录(?)[+]   前端有多少事情可以做,能做到多 ...

  3. java 十六进制颜色对照表

    我们在编程中常常用到十六进制颜色码.   下面是颜色码对照表-英文名称-十六进制-RGB:   英文代码      形像颜色       HEX格式         RGB格式 LightPink 浅 ...

  4. 解决BeanNotOfRequiredTypeException: Bean named 'XXX' must be of type XXX, but was actually of type XXX问题

    Java新手,困扰了一下午. 发布时总是报这样一个错误. org.springframework.beans.factory.BeanCreationException: Error creating ...

  5. node的实践(项目一)

    学习一门语言,我们先要学习他的基本的语法,基本的数据类型,基本的数组操作,字符串的操作,然后就是语言的特性,实现共享和降低耦合的方式,然后开始比较高级的学习(所有语言都是一样的),比如说通信方法,tc ...

  6. JavaScript事件---事件绑定和深入

    发文不易,转载传播,请亲注明链接出处,谢谢! 内容提纲: 1.传统事件绑定的问题 2.W3C事件处理函数 3.IE事件处理函数 4.事件对象的其他内容 事件绑定分为两种:一种是传统事件绑定(内联模型, ...

  7. Javascript基础系列之(三)数据类型 (类型转化)

    所有语言都有类型转化的能力,javascript也不例外,它也为开发者提供了大量的类型转化访法,通过全局函数,可以实现更为复杂的数据类型. var a = 3; var b = a + 3; var ...

  8. [团队项目]Scrum 项目1.0 (演说视频)NABCD

    1.确定选题. 应用NABCD模型,分析你们初步选定的项目,充分说明你们选题的理由. 录制为演说视频,上传到视频网站,并把链接发到团队博客上. 截止日期:2016.5.6日晚10点 2.SCRUM 流 ...

  9. C头文件之<stdio.h>

    (stdio.h) 该头文件主要是执行输入输出操作.文件中重要的概念是“流”(streams).“流”在函数库中用FILE表示,用指针类型FILE *来操作.有三个标准流:stdin, stdout, ...

  10. java多线程-CountDownLatch

    简介 一个同步辅助类,在完成一组正在其他线程中执行的操作之前,它允许一个或多个线程一直等待.用给定的计数 初始化 CountDownLatch.由于调用了 countDown() 方法,所以在当前计数 ...