完美解决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 oop开发滑动(slide)菜单控件
Aug 25 Javascript
读jQuery之十一 添加事件核心方法
Jul 31 Javascript
JavaScript中“过于”犀利地for/in循环使用示例
Oct 22 Javascript
js判断是否为ie的方法小结
Jan 13 Javascript
AngularJS入门教程之Hello World!
Dec 06 Javascript
JS 对象属性相关(检查属性、枚举属性等)
Apr 05 Javascript
js+html5实现canvas绘制网页时钟的方法
May 21 Javascript
Javascript实现登录记住用户名和密码功能
Mar 22 Javascript
Javascript创建类和对象详解
May 31 Javascript
JS实现的3des+base64加密解密算法完整示例
May 18 Javascript
一百行JS代码实现一个校验工具
Apr 30 Javascript
判断js数据类型的函数实例详解
May 23 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中curl和file_get_content的区别
2014/05/10 PHP
php实现有趣的人品测试程序实例
2015/06/08 PHP
Yii框架扩展CGridView增加导出CSV功能的方法
2017/05/24 PHP
php简单计算权重的方法示例【适合抽奖类应用】
2019/06/10 PHP
js可突破windows弹退效果代码
2008/08/09 Javascript
jQuery Form 页面表单提交的小例子
2013/11/15 Javascript
Javascript基础知识(二)事件
2014/09/29 Javascript
浅谈Vue的基本应用
2016/12/27 Javascript
Vue关于数据绑定出错解决办法
2017/05/15 Javascript
详解vuejs几种不同组件(页面)间传值的方式
2017/06/01 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
2017/12/07 Javascript
JS实现选项卡效果的代码实例
2019/05/20 Javascript
40行代码把Vue3的响应式集成进React做状态管理
2020/05/20 Javascript
VueJS实现用户管理系统
2020/05/29 Javascript
详解JavaScript之ES5的继承
2020/07/08 Javascript
解决vue项目router切换太慢问题
2020/07/19 Javascript
解决在Vue中使用axios POST请求变成OPTIONS的问题
2020/08/14 Javascript
element中table高度自适应的实现
2020/10/21 Javascript
[05:39]2014DOTA2西雅图国际邀请赛 淘汰赛7月14日TOPPLAY
2014/07/14 DOTA
[26:21]浴火之凤-TI4世界冠军Newbee战队纪录片
2014/08/07 DOTA
python处理圆角图片、圆形图片的例子
2014/04/25 Python
零基础写python爬虫之抓取糗事百科代码分享
2014/11/06 Python
Python最基本的数据类型以及对元组的介绍
2015/04/14 Python
Python编程实现的简单Web服务器示例
2017/06/22 Python
python交互式图形编程实例(一)
2017/11/17 Python
python 显示数组全部元素的方法
2018/04/19 Python
python中scrapy处理项目数据的实例分析
2020/11/22 Python
Lululemon加拿大官网:加拿大知名体育服装零售商
2019/04/12 全球购物
物业管理毕业生个人的求职信
2013/11/30 职场文书
网上蛋糕店创业计划书
2014/01/24 职场文书
旅游管理毕业生自荐书
2014/02/02 职场文书
2014国庆节主题活动方案:快乐的国庆节
2014/09/16 职场文书
2015年安康杯竞赛活动总结
2015/03/26 职场文书
2015年社区工作总结
2015/04/08 职场文书
银行求职信怎么写
2019/06/20 职场文书
Java实现带图形界面的聊天程序
2022/06/10 Java/Android