完美解决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 相关文章推荐
前端轻量级MVC框架CanJS详解
Sep 26 Javascript
js实现点击添加一个input节点
Dec 05 Javascript
JavaScript中的方法重载实例
Mar 16 Javascript
javascript正则表达式基础知识入门
Apr 20 Javascript
基于rem的移动端响应式适配方案(详解)
Jul 07 Javascript
js实现控制文件拖拽并获取拖拽内容功能
Feb 17 Javascript
vue中父子组件注意事项,传值及slot应用技巧
May 09 Javascript
vue.js打包之后可能会遇到的坑!
Jun 03 Javascript
vue使用jsonp抓取qq音乐数据的方法
Jun 21 Javascript
vue 解决遍历对象显示的顺序不对问题
Nov 07 Javascript
JS实现关闭小广告特效
Jan 29 Javascript
理解Proxy及使用Proxy实现vue数据双向绑定操作
Jul 18 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
php getsiteurl()函数
2009/09/05 PHP
修改PHP脚本使WordPress拦截垃圾评论的方法示例
2015/12/10 PHP
thinkPHP中多维数组的遍历方法
2016/01/09 PHP
thinkPHP简单实现多个子查询语句的方法
2016/12/05 PHP
PHP7 弃用功能
2021/03/09 PHP
抽出www.templatemonster.com的鼠标悬停加载大图模板的代码
2007/07/11 Javascript
广告切换效果(缓动切换)
2009/05/27 Javascript
ExtJS GTGrid 简单用户管理
2009/07/01 Javascript
node.js中的http.createClient方法使用说明
2014/12/15 Javascript
javascript实现tab切换特效
2015/11/12 Javascript
很全面的JavaScript常用功能汇总集合
2016/01/22 Javascript
JS获取多维数组中相同键的值实现方法示例
2017/01/06 Javascript
JS+HTML5 FileReader实现文件上传前本地预览功能
2020/03/27 Javascript
vue路由传参三种基本方式详解
2019/12/09 Javascript
JS Web Flex弹性盒子模型代码实例
2020/03/10 Javascript
Python求两个list的差集、交集与并集的方法
2014/11/01 Python
低版本中Python除法运算小技巧
2015/04/05 Python
Python使用gensim计算文档相似性
2016/04/10 Python
Python实现的概率分布运算操作示例
2017/08/14 Python
Python+树莓派+YOLO打造一款人工智能照相机
2018/01/02 Python
Python中实例化class的执行顺序示例详解
2018/10/14 Python
python Django里CSRF 对应策略详解
2019/08/05 Python
python isinstance函数用法详解
2020/02/13 Python
世界上最大的餐具公司:Oneida
2016/12/17 全球购物
PHP数据运算类型都有哪些
2013/11/05 面试题
季度思想汇报
2014/01/01 职场文书
运动会跳远广播稿
2014/02/04 职场文书
党支部书记岗位职责
2015/02/15 职场文书
2015年手术室工作总结
2015/05/11 职场文书
民间借贷纠纷案件代理词
2015/05/26 职场文书
2015年教师节感言
2015/08/03 职场文书
感谢师恩主题班会
2015/08/17 职场文书
2015年小学师德师风建设工作总结
2015/10/23 职场文书
JavaWeb 入门篇:创建Web项目,Idea配置tomcat
2021/07/16 Java/Android
Javascript中Microtask和Macrotask鲜为人知的知识点
2022/04/02 Javascript
动视暴雪取消疫苗禁令 让所有员工返回线下工作
2022/04/03 其他游戏