完美解决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中访问字符串的子串
Jul 07 Javascript
jquery验证邮箱格式是否正确实例讲解
Nov 16 Javascript
jQuery如何使用自动触发事件trigger
Nov 29 Javascript
jquery判断复选框选中状态以及区分attr和prop
Dec 18 Javascript
jQuery的内容过滤选择器学习教程
Apr 18 Javascript
jQuery事件处理的特征(事件命名机制)
Aug 23 Javascript
Vue概念及常见命令介绍(1)
Dec 08 Javascript
微信小程序 页面跳转和数据传递实例详解
Jan 19 Javascript
JS实现中英文混合文字溢出友好截取功能
Aug 06 Javascript
JavaScript函数式编程(Functional Programming)高阶函数(Higher order functions)用法分析
May 22 Javascript
js实现mp3录音通过websocket实时传送+简易波形图效果
Jun 12 Javascript
vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作
Sep 12 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
完美解决令人抓狂的zend studio 7代码提示(content Assist)速度慢的问题
2013/06/20 PHP
一个显示效果非常不错的PHP错误、异常处理类
2014/03/21 PHP
ThinkPHP自动转义存储富文本编辑器内容导致读取出错的解决方法
2014/08/08 PHP
php使用ffmpeg获取视频信息并截图的实现方法
2016/05/03 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
js原型继承的两种方法对比介绍
2014/03/30 Javascript
jQuery.Callbacks()回调函数队列用法详解
2016/06/14 Javascript
javascript 中模板方法单例的实现方法
2017/10/17 Javascript
JavaScript生成指定范围的时间列表
2018/03/19 Javascript
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
2019/05/12 jQuery
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
2019/05/17 Javascript
vue-router源码之history类的浅析
2019/05/21 Javascript
Vue数字输入框组件使用方法详解
2020/02/10 Javascript
Javascript异步编程async实现过程详解
2020/04/02 Javascript
js实现随机点名器精简版
2020/06/29 Javascript
python抓取京东商城手机列表url实例代码
2013/12/18 Python
python实现2014火车票查询代码分享
2014/01/10 Python
pycharm 主题theme设置调整仿sublime的方法
2018/05/23 Python
Python中logging.NullHandler 的使用教程
2018/11/29 Python
Python实现繁体中文与简体中文相互转换的方法示例
2018/12/18 Python
对YOLOv3模型调用时候的python接口详解
2019/08/26 Python
Django中ORM找出内容不为空的数据实例
2020/05/20 Python
OpenCV Python实现图像指定区域裁剪
2021/03/12 Python
HTML5 贪吃蛇游戏实现思路及源代码
2013/09/03 HTML / CSS
全球地下的服装和态度:Slam Jam
2018/02/04 全球购物
G-Form护具官方网站:美国运动保护装备
2019/09/04 全球购物
介绍一下write命令
2014/08/10 面试题
高级文秘工作总结的自我评价
2013/09/28 职场文书
公司培训心得体会
2014/01/03 职场文书
教育技术职业规划范文
2014/03/04 职场文书
2014年银行员工年终自我评价
2014/09/19 职场文书
县人大领导班子四风对照检查材料思想汇报
2014/10/09 职场文书
七一慰问简报
2015/07/20 职场文书
2016年万圣节家长开放日活动总结
2016/04/05 职场文书
利用JuiceFS使MySQL 备份验证性能提升 10 倍
2022/03/17 MySQL
解决 redis 无法远程连接
2022/05/15 Redis