问题:在jQuery中,对元素绑定mouseover和mouseout事件时,每次移入移出该元素和子元素时,都会触发事件,从而会出现闪动的现象。

原因:浏览器的冒泡行为。

解决方案:

  1. 使用mouseenter事件和mouseleave事件分别代替mouseover事件和mouseout事件。

    例如有如下代码:     

      <style>
         div{width: 50px;height: 50px;background:#ccc;}
         #test{background:red;width: 100px;height: 100px;}
      </style>
      <div id="test">
        <div></div>
      </div>
      <script>
        var test=document.getElementById("test");
        test.addEventListener("mouseover",function(){alert("aa");})
      </script>

如上代码中,当你在test中的div上移入时也会触发alert,只需把以上代码中的mouseover改为mouseenter即可解决此问题。

   2.延迟执行(setTimeout)和取消执行(clearTimeout),就是当使用mouseover的时候延迟执行,当使用mouseout的时候取消延迟执行。

    例如代码如下:

      test.onmouseover=function(){

         clearTimeout(t);

         t=setTimeout(zoomIn,400);

         alert("aa")

      };

      test.onmouseover=function(){

         if(t!=null)clearTimeout(t);

         t=null;

      } ;

jQuery中mouseover和mouseout冒泡产生闪烁问题的更多相关文章

  1. jquery中mouseover和mouseenter的区别

    jquery中mouseover和mouseenter的区别 一.总结 一句话总结: 见名知意:enter(进入)和over(在上方)的意思好好思考一下 mouseover就是从子元素回到自己的时候也 ...

  2. jQuery中mouseleave和mouseout的区别详解

    很多人在使用jQuery实现鼠标悬停效果时,一般都会用到mouseover和mouseout这对事件.而在实现过程中,可能会出现一些不理想的状况. 先看下使用mouseout的效果: <p> ...

  3. jquery的mouseover和mouseout闪烁问题

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

  4. jQuery事件--mouseover()、mouseout()、mouseenter()和mouseleave()

       mouseover([[data],fn]) 概述 当鼠标指针位于元素上方时,会发生 mouseover 事件.该事件大多数时候会与 mouseout 事件一起使用 注释:与 mouseente ...

  5. 零散的笔记:jquery中的事件

    1.替代mouseover和mouseout的事件 jquery的mouseover和mouseout事件在移到子页面时也会触发,这在移到一级菜单弹出二级菜单,移到二级菜单时一级菜单也要显示时,这两个 ...

  6. jQuery因mouseover,mouseout冒泡产生的闪烁问题

    由于浏览器的冒泡行为.造成如果在一个DIV元素上同时定义了mouseover,mouseout的时候,当鼠标移动到DIV中的child子元素的时候,就会同时执行了两个操作mouseover和mouse ...

  7. jQuery中hover与mouseover和mouseout的区别分析

    本文实例分析了jQuery中hover与mouseover和mouseout的区别.分享给大家供大家参考,具体如下: 以前一直以为在jquery中其实mouseover和mouseout两个事件等于h ...

  8. mouseover和mouseout闪烁问题

    在父级元素上注册了mouseover和mouseout事件后,当鼠标移动到子元素上时,会触发父级的mouseout和mouseover事件,反复触发,形成闪烁. 原因: 一种是由于冒泡,子级的mous ...

  9. 【jQuery】jQuery中的事件捕获与事件冒泡

    在介绍之前,先说一下JavaScript中的事件流概念.事件流描述的是从页面中接受事件的顺序.   一.事件冒泡( Event Bubbling)            IE 的事件流叫做事件冒泡,即 ...

随机推荐

  1. Rails Cookie和session使用

    Rails通过cookies方法来操作cookie.这和session的操作有点相似 class CommentsController < ApplicationController def n ...

  2. 打造jQuery的高性能TreeView

    UPDATE:回答网友提出的设置节点的自定义图片的问题,同时欢迎大家提问,我尽量在第一时间回复,详见最后 2009-11-03 项目中经常会遇到树形数据的展现,包括导航,选择等功能,所以树控件在大多项 ...

  3. errno.h的数字对应的字符串错误

    #ifndef _I386_ERRNO_H #define _I386_ERRNO_H #define EPERM 1 /* Operation not permitted */ #define EN ...

  4. Phonegap中插件管理

    一.cordova-plugin-console控制台插件的使用 1.进入工程路径后,输入如下命令: cordova plugin add cordova-plugin-console 2. 查看插件 ...

  5. SQL注入与安全防护---以PHP为例

    一.什么是sql注入: 简单来说,当我们从前端的用户表单数据往后台数据库传输时,可能用户表单数据中的某些数据,会跟我们的后台发生“有机”反应,从而导致发生一些数据库的异常操作. 举个例子吧,以简单的用 ...

  6. 我的第一个php扩展

    一.进入php源码包,找到ext文件夹 cd /owndata/software/php-5.4.13/ext 文件夹下放的都是php的相关扩展模块 二.生成自己的扩展文件夹和相关文件 php支持开发 ...

  7. memcached内存管理机制分析

    memached是高性能分布式内存对象系统,通过在内存中存储数据对象来减少对磁盘的数据读取次数,提高服务速度. 从业务需求出发.我们通过一条命令(如set)将一条键值对(key,value)插入mem ...

  8. Java 理解泛型的基本含义

    Java 泛型 Java 泛型(generics)是 JDK 5 中引入的一个新特性, 泛型提供了编译时类型安全检测机制,该机制允许程序员在编译时检测到非法的类型. 泛型的本质是参数化类型,也就是说所 ...

  9. 32位汇编基础_cpu 寄存器

    32位通用寄存器 EAX EBX ECX EDX EBP ESP ESI EDI 八个寄存器都可以作为普通的数据寄存器使用.但有的有特殊的用途: EAX    为累加器, ECX    为计数器, E ...

  10. 【ZZ】浅谈大型web系统架构 | 菜鸟教程

    浅谈大型web系统架构 http://www.runoob.com/w3cnote/large-scale-web-system-architecture.html