完美解决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 相关文章推荐
JavaScript中的new的使用方法与注意事项
May 16 Javascript
jQuery选择器全面总结
Jan 06 Javascript
windows8.1+iis8.5下安装node.js开发环境
Dec 12 Javascript
JavaScript取得WEB安全颜色列表的方法
Jul 14 Javascript
JavaScipt中栈的实现方法
Feb 17 Javascript
浅谈Javascript数据属性与访问器属性
Jul 26 Javascript
前端框架Vue.js中Directive知识详解
Sep 12 Javascript
JavaScript学习笔记整理_用于模式匹配的String方法
Sep 19 Javascript
javascript按钮禁用和启用的效果实例代码
Oct 29 Javascript
ECharts地图绘制和钻取简易接口详解
Jul 12 Javascript
微信小程序云函数使用mysql数据库过程详解
Aug 07 Javascript
详解CocosCreator项目结构机制
Apr 14 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文件操作方法汇总
2015/07/01 PHP
Thinkphp模板标签if和eq的区别和比较实例分析
2015/07/01 PHP
利用jQuery的$.event.fix函数统一浏览器event事件处理
2009/12/21 Javascript
jQuery学习4 浏览器的事件模型
2010/02/07 Javascript
深入理解javascript动态插入技术
2013/11/12 Javascript
在线一元二次方程计算器实例(方程计算器在线计算)
2013/12/22 Javascript
倒记时60刷新网页的js代码
2014/02/18 Javascript
JS实现的生成随机数的4个函数分享
2015/02/11 Javascript
基于OL2实现百度地图ABCD marker的效果
2015/10/01 Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
2015/11/29 Javascript
js仿3366小游戏选字游戏
2016/04/14 Javascript
Bootstrap选项卡与Masonry插件的完美结合
2016/07/06 Javascript
AngularJS下对数组的对比分析
2016/08/24 Javascript
Jq通过td获取同行其它列td的方法
2016/10/05 Javascript
for循环 + setTimeout 结合一些示例(前端面试题)
2017/08/30 Javascript
JS简单获取并修改input文本框内容的方法示例
2018/04/08 Javascript
axios封装与传参示例详解
2020/10/18 Javascript
python通过正则查找微博@(at)用户的方法
2015/03/13 Python
在Python的Django框架中用流响应生成CSV文件的教程
2015/05/02 Python
python调用Delphi写的Dll代码示例
2017/12/05 Python
使用python对文件中的数值进行累加的实例
2018/11/28 Python
python 实现的发送邮件模板【普通邮件、带附件、带图片邮件】
2019/07/06 Python
Django model update的多种用法介绍
2020/03/28 Python
python爬虫selenium和phantomJs使用方法解析
2019/08/08 Python
python3中布局背景颜色代码分析
2020/12/01 Python
谈一谈HTML5本地存储技术
2016/03/02 HTML / CSS
Crocs卡骆驰洞洞鞋日本官方网站:Crocs日本
2016/08/25 全球购物
资生堂英国官网:Shiseido英国
2020/12/30 全球购物
新闻专业大学生找工作的自我评价
2013/10/30 职场文书
外贸英语专业求职信范文
2013/12/25 职场文书
财务支持类个人的自我评价
2014/02/14 职场文书
煤矿安全协议书
2014/08/20 职场文书
2014年药店工作总结
2014/11/20 职场文书
Python实现随机生成迷宫并自动寻路
2021/06/13 Python
使用PostGIS完成两点间的河流轨迹及流经长度的计算(推荐)
2022/01/18 PostgreSQL
详解Nginx的超时keeplive_timeout配置步骤
2022/05/25 Servers