完美解决jQuery的hover事件在IE中不停闪动的问题


Posted in Javascript onFebruary 10, 2017

在使用jQuery的hover事件时,经常会因为鼠标滑动过快导致菜单不停闪动的情况,相信很多朋友都遇到过自己做的纵向下拉菜单不停的收缩,非常的讨厌。今天在给一个网站设计菜单时也遇到了这个情况,结果在百度上找了N久,没有找到解决方法。在这里吐槽一下,百度太2了,收录的内容都没什么价值,最后还是在google找到了解决方法,下面就把这个jQuery的hover在IE中会导致不停闪动的解决方法教给大家。

$("#category ul").find("li").each( function() { 
$(this).mouseover( function() {
$(this).children("ul").show(); 
} ); 
$(this).mouseout( function() {
$(this).children("ul").hide();
 } ); 
} );

鼠标在下拉菜单移动时菜单会不断闪烁,说明不断触发了 mouseover 和 mouseout 事件。

其实很简单的解决方法:将 mouseover 改成 mouseenter,mouseout 改成 mouseleave。mouseenter 和 mouseleave 事件是 jQuery 库中实现的,并不是浏览器的原生事件。不过最重要的是把菜单不停闪动的问题解决了!

$("#category ul").find("li").each( function() {
 $(this).mouseenter(function() { 
$(this).children("ul").show(); 
} );
 $(this).mouseleave(function() {
 $(this).children("ul").hide();
 } ); 
} );

以上这篇完美解决jQuery的hover事件在IE中不停闪动的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
传智播客学习之java 反射
Nov 22 Javascript
jquery.jstree 增加节点的双击事件代码
Jul 27 Javascript
javascript实现图片切换的幻灯片效果源代码
Dec 12 Javascript
jquery cookie的用法总结
Nov 18 Javascript
javascript中数组的冒泡排序使用示例
Dec 18 Javascript
jQuery中not()方法用法实例
Jan 06 Javascript
Angular 根据 service 的状态更新 directive
Apr 03 Javascript
BootStrap+Mybatis框架下实现表单提交数据重复验证
Mar 23 Javascript
Angular通过指令动态添加组件问题
Jul 09 Javascript
layui获取多选框中的值方法
Aug 15 Javascript
Jquery Datatables的使用详解
Jan 30 jQuery
JS+canvas五子棋人机对战实现步骤详解
Jun 04 Javascript
jquery hover 不停闪动问题的解决方法(亦为stop()的使用)
Feb 10 #Javascript
JS验证不重复验证码
Feb 10 #Javascript
使用jquery给新生的th绑定hover事件的实例
Feb 10 #Javascript
详谈Ajax请求中的async:false/true的作用(ajax 在外部调用问题)
Feb 10 #Javascript
jQuery移除或禁用html元素点击事件常用方法小结
Feb 10 #Javascript
jQuery基于Ajax方式提交表单功能示例
Feb 10 #Javascript
Bootstrap轮播图学习使用
Feb 10 #Javascript
You might like
PHPThumb PHP 图片缩略图库
2012/03/11 PHP
用php制作简单分页(从数据库读取记录)的方法详解
2013/05/04 PHP
PHP实现支持SSL连接的SMTP邮件发送类
2015/03/05 PHP
php实现对两个数组进行减法操作的方法
2015/04/17 PHP
PHP实现页面静态化深入讲解
2021/03/04 PHP
XML+XSL 与 HTML 两种方案的结合
2007/04/22 Javascript
js为数字添加逗号并格式化数字的代码
2013/08/23 Javascript
Eclipse下jQuery文件报错出现错误提示红叉
2014/01/13 Javascript
jquery.ajax的url中传递中文乱码问题的解决方法
2014/02/07 Javascript
jquery制作居中遮罩层效果分享
2014/02/21 Javascript
jquery实现在光标位置插入内容的方法
2015/02/05 Javascript
Js为表单动态添加节点内容的方法
2015/02/10 Javascript
浅谈jQuery中ajaxPrefilter的应用
2016/08/01 Javascript
jQuery代码实现实时获取时间
2017/01/29 Javascript
js es6系列教程 - 新的类语法实战选项卡(详解)
2017/09/02 Javascript
详解js的作用域、预解析机制
2018/02/05 Javascript
vue iview多张图片大图预览、缩放翻转
2019/07/13 Javascript
layui radio点击事件实现input显示和隐藏的例子
2019/09/02 Javascript
vue+webpack dev本地调试全局样式引用失效的解决方案
2019/11/12 Javascript
Node.js API详解之 string_decoder用法实例分析
2020/04/29 Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
2020/08/13 Javascript
vue 修改 data 数据问题并实时显示操作
2020/09/07 Javascript
nestjs返回给前端数据格式的封装实现
2021/02/22 Javascript
python zip文件 压缩
2008/12/24 Python
深入Python解释器理解Python中的字节码
2015/04/01 Python
python图书管理系统
2020/04/05 Python
Python3中详解fabfile的编写
2018/06/24 Python
pyspark.sql.DataFrame与pandas.DataFrame之间的相互转换实例
2018/08/02 Python
python实现连连看辅助之图像识别延伸
2019/07/17 Python
django的聚合函数和aggregate、annotate方法使用详解
2019/07/23 Python
python各类经纬度转换的实例代码
2019/08/08 Python
Python 异常处理Ⅳ过程图解
2019/10/18 Python
python生成任意频率正弦波方式
2020/02/25 Python
HTML5实现的震撼3D焦点图动画的示例代码
2019/09/26 HTML / CSS
护士自我评价
2014/02/01 职场文书
社区低保工作总结2015
2015/07/23 职场文书