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

问题解析
在用到mouseover和mouseout事件来作为事件触发的条件,单一元素可以正常使用,但是如果我们用做触发的元素内部有其他的元素的时候当鼠标移上的时候会反复 的触发mouseover和mouseout事件。因为内部元素在鼠标移上的时候会向它的父对象派发事件,所以外面元素相当于也触发了mouseover 事件。
解决方法
jquery(需要版本号大于1.2.2)中修复上述问题。
将mouseover,mouseout 替换 mouseenter和mouseleave事件,这是IE特有的函数,使用jquery就很好的解决了兼容问题。函数的原理当第一次鼠标进入节点区域时触发,以后在节点区域内(子节点间)移动时不触发。
绑定示例:
$('div').bind("mouseenter",function(){ // code });
$('div').bind("mouseleave",function(){ // code});
jQuery mouseover,mouseout事件多次执行的问题处理的更多相关文章
- 关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
轮播中大多会选择mouseover和mouseout 这个时候是没有任何问题的 但当遇到有css3动画的时候,会发现移入移出过快 动画还没加载完成就需要执行下一个动画,完了动画样式就错乱了. 这时候 ...
- js的onclick和jquery的bind事件执行先后顺序
近期在项目中为每一个ajax触发按钮写正在加载的效果,用的是bootstarp 代码如下 $(function(){ $('.btn').bind('click',function(e){ var $ ...
- jquery如何阻止子元素相应mouseout事件
jquery如何阻止子元素相应mouseout事件:mouseout有一个特点,当鼠标移入子元素的时候,也会触发此事件,但是在实际应用中这个特点往往不是我们想要的,下面就通过代码实例介绍一下如何实现此 ...
- mouseover,mouseout和mouseenter,mouseleave的区别及适用情况
在做类似于百度地图右下角,不同地图切换UI时,遇到了问题. 就是鼠标滑过的时候出现一个层,当鼠标滑到当前层的话mouseover和mouseout在低版本的浏览器会出现闪动的现象,最简单的那就是把mo ...
- jQuery因mouseover,mouseout冒泡产生的闪烁问题
由于浏览器的冒泡行为.造成如果在一个DIV元素上同时定义了mouseover,mouseout的时候,当鼠标移动到DIV中的child子元素的时候,就会同时执行了两个操作mouseover和mouse ...
- 鼠标 mouseover和mouseout事件
在div内想实现鼠标移入移出效果,最开始的时候是用了jquery的mouseout和mouseover事件来实现的, $('.product).mouseover(function(){ …… }). ...
- jquery的hover mouseover mouseout mouseenter mouseleave的区别
jquery的hover mouseover mouseout mouseenter mouseleave的区别 1.mouseover mouseout mouseover - 鼠标指针经过任何子元 ...
- jquery mouseout事件冒泡解决方法
在界面中最多使用的是div,如果一个div中包含多个div或img对象时, 针对mouseout鼠标移出事件时,并没有移出div层,但是当移动到div中的img时,也触发了该mouseout事件,这就 ...
- mouseover和mouseout事件在鼠标经过子元素时也会触发
JavaScript的mouseover和mouseout事件,在绑定元素内部有子元素的情况下, 经过绑定元素时会多次触发mouseover和mouseout事件. jQuery解决办法: jquer ...
随机推荐
- JAVA泛型那些事儿
本篇内容源于本人一个好友sgpro提供的java学习例子,现拿出来给大家分享. 此例子非常直观的通过代码讲解了java泛型的用法和好处,是笔者一直珍藏的最好的泛型学习笔记. 一.面向过程的时代 我们先 ...
- ajax调用action后返回list给list.jsp,显示为xml文档
struts2中使用的是map来保存数据的,所以这里绑定的值是key和value1 <?xml version="1.0" encoding="UTF-8" ...
- 武汉科技大学ACM :1002: 零起点学算法66——反话连篇
Problem Description 把输入的字符按照反着顺序输出 Input 多组测试数据 每组一行(每组数据不超过200个字符) Output 按照输入的顺序反着输出各个字符 Sample I ...
- SpringMVC 文件上传配置,多文件上传,使用的MultipartFile(转)
文件上传项目的源码下载地址:http://download.csdn.net/detail/swingpyzf/6979915 一.配置文件:SpringMVC 用的是 的MultipartFil ...
- 为什么要刷新一下才能获取cookie
首先编写以下简单的代码: <?php setcookie('a','value'); print $_COOKIE['a']; 第一次访问时,报错: 报错的原因是$_COOKIE['a']的值不 ...
- JQUERY1.9学习笔记 之层级选择器(四)
下一个邻居选择器(“prev ~ siblings”) 描述:选择所有"prev"后的邻居选择器,他们有相同的父节点. 注意:prev + next 与 prev ~ siblin ...
- Indy10 即时通讯Demo
最近闲来无事,重新学习了Indy10,顺手写了一段即时通讯代码.与上次写的笔记有不同之处,但差别不大. 未研究过TCP打洞技术,所以下面的代码采用的是 客户端--服务器--客户端 模式,也就是服务 ...
- [资料] Apache2 的 httpd.conf 经典中文翻译
[i=s] 本帖最后由 www.PHP888.com 于 2009-5-22 13:40 编辑 [/i] # 基于 NCSA 服务的配置文件. # #这是Apache服务器主要配置文件. #它包含服务 ...
- 转:socket通信简介
转:http://blog.csdn.net/xiaoweige207/article/details/6211577/ 我们深谙信息交流的价值,那网络中进程之间如何通信,如我们每天打开浏览器浏览网页 ...
- js new Date().Format
/** * * 对Date的扩展,将 Date 转化为指定格式的String * 月(M).日(d).小时(h).分(m).秒(s).季度(q) 可以用 1-2 个占位符 * 年(y)可以用 1-4 ...