完美解决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 相关文章推荐
jQuery事件 delegate()使用方法介绍
Oct 30 Javascript
jQuery Mobile页面跳转后未加载外部JS原因分析及解决
Mar 18 Javascript
jQuery-ui引入后Vs2008的无智能提示问题解决方法
Feb 10 Javascript
基于bootstrap3和jquery的分页插件
Jul 31 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
Nov 12 Javascript
js 中获取制定的cook信息实现方法
Nov 19 Javascript
js轮播图的插件化封装详解
Jul 17 Javascript
JavaScript中创建原子的方法总结
Aug 26 Javascript
微信小程序官方动态自定义底部tabBar的例子
Sep 04 Javascript
layui实现根据table数据判断按钮显示情况的方法
Sep 26 Javascript
Echarts实现多条折线可拖拽效果
Dec 19 Javascript
Vue-cli打包后部署到子目录下的路径问题说明
Sep 02 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 download.php实现代码 跳转到下载文件(response.redirect)
2009/08/26 PHP
php中计算时间差的几种方法
2009/12/31 PHP
php 网页播放器用来播放在线视频的代码(自动判断并选择视频文件类型)
2010/06/03 PHP
xss防御之php利用httponly防xss攻击
2014/03/21 PHP
php实现MySQL数据库备份与还原类实例
2014/12/09 PHP
PHP+Ajax实现验证码的实时验证
2016/07/20 PHP
PHP从零开始打造自己的MVC框架之类的自动加载实现方法详解
2019/06/03 PHP
slice函数的用法 之不错的应用
2006/12/29 Javascript
浅谈javascript中的闭包
2015/05/13 Javascript
Bootstrap和Java分页实例第二篇
2016/12/23 Javascript
基于vue.js实现的分页
2018/03/13 Javascript
vue.js做一个简单的编辑菜谱功能
2018/05/08 Javascript
JS实现长图上下滚动效果
2020/03/19 Javascript
Node.js API详解之 tty功能与用法实例分析
2020/04/27 Javascript
jQuery实现的解析本地 XML 文档操作示例
2020/04/30 jQuery
用Python代码来绘制彭罗斯点阵的教程
2015/04/03 Python
Python输出PowerPoint(ppt)文件中全部文字信息的方法
2015/04/28 Python
Python基于select实现的socket服务器
2016/04/13 Python
对python添加模块路径的三种方法总结
2018/10/16 Python
python:接口间数据传递与调用方法
2018/12/17 Python
pycharm的console输入实现换行的方法
2019/01/16 Python
PyQt5实现让QScrollArea支持鼠标拖动的操作方法
2019/06/19 Python
对Django url的几种使用方式详解
2019/08/06 Python
django框架中间件原理与用法详解
2019/12/10 Python
python 瀑布线指标编写实例
2020/06/03 Python
电气工程及其自动化学生实习自我鉴定
2013/09/19 职场文书
销售演讲稿范文
2014/01/08 职场文书
公司承诺书格式
2014/05/21 职场文书
实习护士自荐信
2014/06/21 职场文书
开展批评与自我批评发言稿
2014/10/16 职场文书
公务员群众路线心得体会
2014/11/03 职场文书
酒店销售经理岗位职责
2015/04/02 职场文书
小学思想品德教学反思
2016/02/24 职场文书
为什么不建议在go项目中使用init()
2021/04/12 Golang
动漫APP软件排行榜前十名,半次元上榜,第一款由腾讯公司推出
2022/03/18 杂记
python 使用pandas读取csv文件的方法
2022/12/24 Python