控制鼠标移上移下事件,在使用Jquery 的mouseover,mouseout事件时,元素内部含有其它元素,会造成该事件多次的触发的情况。

问题解析

在用到mouseovermouseout事件来作为事件触发的条件,单一元素可以正常使用,但是如果我们用做触发的元素内部有其他的元素的时候当鼠标移上的时候会反复 的触发mouseovermouseout事件。因为内部元素在鼠标移上的时候会向它的父对象派发事件,所以外面元素相当于也触发了mouseover 事件。

解决方法

jquery(需要版本号大于1.2.2)中修复上述问题。
将mouseover,mouseout 替换 mouseenter和mouseleave事件,这是IE特有的函数,使用jquery就很好的解决了兼容问题。函数的原理当第一次鼠标进入节点区域时触发,以后在节点区域内(子节点间)移动时不触发。
绑定示例:

$('div').bind("mouseenter",function(){ // code });
$('div').bind("mouseleave",function(){ // code});

jQuery mouseover,mouseout事件多次执行的问题处理的更多相关文章

  1. 关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别

    轮播中大多会选择mouseover和mouseout  这个时候是没有任何问题的 但当遇到有css3动画的时候,会发现移入移出过快 动画还没加载完成就需要执行下一个动画,完了动画样式就错乱了. 这时候 ...

  2. js的onclick和jquery的bind事件执行先后顺序

    近期在项目中为每一个ajax触发按钮写正在加载的效果,用的是bootstarp 代码如下 $(function(){ $('.btn').bind('click',function(e){ var $ ...

  3. jquery如何阻止子元素相应mouseout事件

    jquery如何阻止子元素相应mouseout事件:mouseout有一个特点,当鼠标移入子元素的时候,也会触发此事件,但是在实际应用中这个特点往往不是我们想要的,下面就通过代码实例介绍一下如何实现此 ...

  4. mouseover,mouseout和mouseenter,mouseleave的区别及适用情况

    在做类似于百度地图右下角,不同地图切换UI时,遇到了问题. 就是鼠标滑过的时候出现一个层,当鼠标滑到当前层的话mouseover和mouseout在低版本的浏览器会出现闪动的现象,最简单的那就是把mo ...

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

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

  6. 鼠标 mouseover和mouseout事件

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

  7. jquery的hover mouseover mouseout mouseenter mouseleave的区别

    jquery的hover mouseover mouseout mouseenter mouseleave的区别 1.mouseover mouseout mouseover - 鼠标指针经过任何子元 ...

  8. jquery mouseout事件冒泡解决方法

    在界面中最多使用的是div,如果一个div中包含多个div或img对象时, 针对mouseout鼠标移出事件时,并没有移出div层,但是当移动到div中的img时,也触发了该mouseout事件,这就 ...

  9. mouseover和mouseout事件在鼠标经过子元素时也会触发

    JavaScript的mouseover和mouseout事件,在绑定元素内部有子元素的情况下, 经过绑定元素时会多次触发mouseover和mouseout事件. jQuery解决办法: jquer ...

随机推荐

  1. c-100米球反弹

    #include <iostream> #define TIMES 10 int main(void) { ; ; //第一次反弹的高度. ; i <= TIMES; i++) { ...

  2. StrokeStart与StrokeEnd动画

    通过修改CAShapeLayer的StrokeStart与StrokeEnd的值来实现画图动画 效果图: 代码部分: #import "ViewController.h" @int ...

  3. 过滤器(filter)实现

    花了2天时间,实现了过滤器功能,针对数据进行筛选,包含以下7个过滤器: 'date','currency','number','tolowercase','touppercase','orderBy' ...

  4. intent.setFlags方法中参数值的含义

    intent.setFlags()方法中参数的含义 1.FLAG_ACTIVITY_NEW_TASK: 例如现在栈一的情况是:A    B   C(C位于栈顶),C通过intent跳转到D,并且这个I ...

  5. [译] 什么是移动友好的 - Mobile-friendliness

    什么是移动友好的?   移动友好到底意味着什么取决于您与谁讨论它. 我们不妨这样理解: 移动友好的设计以 表现力, 内容和性能 三方面为目标来改善用户体验.   表现力 - Presentation ...

  6. JQuery+Js 获取浏览器高度和宽度

    JQuery-------做手机Web开发做浏览器兼容用到了,所以在网上找了些汇总下. alert($(window).height()); //浏览器当前窗口可视区域高度 alert($(docum ...

  7. 关于多本小说站的SEO—从”易读中文网”获得的心得体会

    从目前国内的网站流量来说,电影站,小说站,游戏站等的流量占总流量的比例还是很高的,许多站长把目光投入到了这几个方面,本文就着重来说对于小说站,尤其是多本小说站的SEO心得体会! 对于小说站来说,只要排 ...

  8. 针对access数据库的增删改查

    1.执行查询操作:(ExecuteReader方法) string myConnectionString = "Provider = Microsoft.Jet.OLEDB.4.0;Data ...

  9. 手机页面关于头部固定定位与input出现的问题

    前些天写了一个页面,要求头部导航进行固定定位position:fixed.内容区域有输入框input.在大多数手机上都是显示正常的,可偏在一些低版本的手机却出现问题了. 把我给苦恼的不行. 问题:头部 ...

  10. javascript 版的 SuperMario

    注册博客园4年了,还没发表过一篇文章.明年就是超级马里奥这款游戏诞生30周年了,作为一个喜欢2d卷轴游戏的玩家,决定用js实现一个.目前只实现了基本玩法,得分什么的也还没做.项目的GitHub的地址是 ...