完美解决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 相关文章推荐
经常用到的JavasScript事件的翻译
Apr 09 Javascript
JavaScript Distilled 基础知识与函数
Apr 07 Javascript
location对象的属性和方法应用(解析URL)
Apr 12 Javascript
JS 仿腾讯发表微博的效果代码
Dec 25 Javascript
JQuery调用WebServices的方法和4个实例
May 06 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
Sep 26 Javascript
JQuery移动页面开发之屏幕方向改变与滚屏的实现
Dec 03 Javascript
使用jQuery+EasyUI实现CheckBoxTree的级联选中特效
Dec 06 Javascript
微信小程序模板消息限制实现无限制主动推送的示例代码
Aug 27 Javascript
Vue混入mixins滚动触底的方法
Nov 22 Javascript
webpack+vue-cil 中proxyTable配置接口地址代理操作
Jul 18 Javascript
js实现搜索提示框效果
Sep 05 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实现首页链接查询 友情链接检查的代码
2010/01/05 PHP
PHP使用SOAP调用.net的WebService数据
2013/11/12 PHP
PHP中读取照片exif信息的方法
2014/08/20 PHP
PHP实现导出excel数据的类库用法示例
2016/10/15 PHP
thinkPHP实现多字段模糊匹配查询的方法
2016/12/01 PHP
PHP微信分享开发详解
2017/01/14 PHP
php封装的mongodb操作类代码
2017/08/06 PHP
PHP面向对象程序设计模拟一般面向对象语言中的方法重载(overload)示例
2019/06/13 PHP
Ext JS 4实现带week(星期)的日期选择控件(实战二)
2013/08/21 Javascript
使用js解决由border属性引起的div宽度问题
2013/11/26 Javascript
js 获取、清空input type="file"的值(示例代码)
2013/12/24 Javascript
JS中使用sort结合localeCompare实现中文排序实例
2014/07/23 Javascript
javascript中通过arguments参数伪装方法重载
2014/10/08 Javascript
jQuery+CSS实现的网页二级下滑菜单效果
2015/08/25 Javascript
jQuery获取某天的农历日期并判断是否除夕或新年的方法
2016/03/01 Javascript
jQuery获取radio选中项的值实例
2016/06/18 Javascript
Jquery uploadify 多余的Get请求(404错误)的解决方法
2017/01/26 Javascript
Angular获取手机验证码实现移动端登录注册功能
2017/05/17 Javascript
angular bootstrap timepicker TypeError提示怎么办
2017/06/13 Javascript
JQueryDOM之样式操作
2019/03/27 jQuery
基于Vue插入视频的2种方法小结
2019/04/02 Javascript
javascript设计模式 ? 观察者模式原理与用法实例分析
2020/04/22 Javascript
Python 正则表达式入门(初级篇)
2016/12/07 Python
高效测试用例组织算法pairwise之Python实现方法
2017/07/19 Python
Python二叉树的遍历操作示例【前序遍历,中序遍历,后序遍历,层序遍历】
2018/12/24 Python
Django集成CAS单点登录的方法示例
2019/06/10 Python
python 实现在tkinter中动态显示label图片的方法
2019/06/13 Python
python 绘制拟合曲线并加指定点标识的实现
2019/07/10 Python
Python Django框架url反向解析实现动态生成对应的url链接示例
2019/10/18 Python
python 实现快速生成连续、随机字母列表
2019/11/28 Python
使用jupyter notebook直接打开.md格式的文件
2020/04/10 Python
python Matplotlib数据可视化(2):详解三大容器对象与常用设置
2020/09/30 Python
什么是表空间(tablespace)和系统表空间(System tablespace)
2013/02/25 面试题
新闻系毕业生推荐信
2013/11/16 职场文书
员工评语范文
2014/12/31 职场文书
Python基础之函数嵌套知识总结
2021/05/23 Python