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 ...
随机推荐
- php防止重复提交问题
php防止重复提交问题 用户提交表单时可能因为网速的原因,或者网页被恶意刷新,致使同一条记录重复插入到数据库中,这是一个比较棘手的问题.我们可以从客户端和服务器端一起着手,设法避免同一表单的重复提交. ...
- Android开发手记(8) ProgressDialog的使用
ProgressDialog,进度对话框.一般有两种,一种是圆形的进度条(ProgressDialog.STYLE_SPINNER),另一种是长条形的进度条(ProgressDialog.STYLE_ ...
- Linux && vim 批量替换
Linux批量文件的字符串替换 sed -i "s/oldstring/newstring/g" `grep oldstring -rl path` vim多行替换::1,2s/s ...
- Windows8 正式版最简单的去除桌面水印方法
方法一: 优点:无需替换文件,无需任何工具,对系统没有副作用缺点:更换主题或者壁纸之后水印再现方法:按住 “win键+P” 进入 “第二屏幕 ”选择 “扩展”再按住 “win键+P” 进入 “第二屏幕 ...
- 单点登录CAS使用记(六):单点登出、单点注销
单点登出基本上没有啥配置 直接在原来logout的时候,重定向到Cas-Server的logout方法 @RequestSecurity @RequestMapping(value = "l ...
- JavaScript 显示弹出窗口(二)
window. open ( sURL , sName , sFeatures , bReplace ) sURL:可选项,被加载页面的html sName:可选项,指定打开的窗口的名字 _media ...
- Win+PHP+IECapt完整实现网页批量截图并创建缩略图
最近在开发一个本地互联网应用的项目,为了增加用户体验,需要在搜索结果左侧显示如图一所示的某个网站的缩略图效果,在网上不停地百度谷歌了一上午后,发现大多数实现少量截图还是可以的,如果大批量的截图总会在中 ...
- 《python基础教程》笔记之 字符串
字符串格式化 字符串格式化使用字符串格式化操作符即百分号%来实现.在%的左侧放置一个字符串(格式化字符串),而在右侧则放置希望格式化的值,可以使用一个值,如一个字符串或者数字,也可以使用多个值的元组或 ...
- eclipse中JSP开发环境的配置
1. Java环境 自行百度配置 2. Web Server环境安装: Web Server选择流行的Apache Tomcat .到http://tomcat.apache.org/ 处下载, ...
- 转:VmWare下安装CentOS6图文安装教程
文章来自于:http://www.cnblogs.com/seesea125/archive/2012/02/25/2368255.html 查看文章索引请通过http://www.cnblogs.c ...