完美解决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评估用户输入密码的强度实现代码
Nov 30 Javascript
jQuery删除节点的三个方法即remove()detach()和empty()
Dec 27 Javascript
JavaScript设计模式之单件模式介绍
Dec 28 Javascript
jQuery实现的进度条效果
Jul 15 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)
Nov 30 Javascript
vue.js删除动态绑定的radio的指定项
Jun 02 Javascript
jQuery实现点击关注和取消功能
Jul 03 jQuery
js合并两个数组生成合并后的key:value数组
May 09 Javascript
Vue filter格式化时间戳时间成标准日期格式的方法
Sep 16 Javascript
jquery的$().each和$.each的区别
Jan 18 jQuery
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 jQuery
JS实现碰撞检测效果
Mar 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
php数组函数序列之array_search()- 按元素值返回键名
2011/11/04 PHP
php使用lua+redis实现限流,计数器模式,令牌桶模式
2019/04/04 PHP
laravel 关联关系遍历数组的例子
2019/10/10 PHP
PHP ob缓存以及ob函数原理实例解析
2020/11/13 PHP
escape、encodeURI、encodeURIComponent等方法的区别比较
2006/12/27 Javascript
[推荐]javascript 面向对象技术基础教程
2009/03/03 Javascript
js 对联广告、漂浮广告封装类(IE,FF,Opera,Safari,Chrome
2009/11/26 Javascript
jQuery 获取对象 定位子对象
2010/05/31 Javascript
基于JQuery的简单实现折叠菜单代码
2010/09/15 Javascript
jquery ajax abort()的使用方法
2010/10/28 Javascript
关于jQuery UI 使用心得及技巧
2012/10/10 Javascript
JavaScript 盒模型 尺寸深入理解
2012/12/31 Javascript
解析使用js判断只能输入数字、字母等验证的方法(总结)
2013/05/14 Javascript
JavaScript中九种常用排序算法
2014/09/02 Javascript
ionic实现带字的toggle滑动组件
2016/08/27 Javascript
整理一下常见的IE错误
2016/11/18 Javascript
javascript中闭包概念与用法深入理解
2016/12/15 Javascript
Javascript 对cookie操作详解及实例
2016/12/29 Javascript
原生js实现倒计时--2018
2017/02/21 Javascript
vue使用Google地图的实现示例代码
2018/12/19 Javascript
JS实现指定区域的全屏显示功能示例
2019/04/25 Javascript
Vue组件化开发之通用型弹出框的实现
2020/02/28 Javascript
[52:12]FNATIC vs Infamous 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
Python如何调用外部系统命令
2019/08/07 Python
Python批量安装卸载1000个apk的方法
2020/04/10 Python
Python实现播放和录制声音的功能
2020/08/12 Python
基于python的opencv图像处理实现对斑马线的检测示例
2020/11/29 Python
美国踏板车和轻便摩托车销售网站:Mega Motor Madness
2020/02/26 全球购物
国旗下的演讲稿
2014/05/08 职场文书
保护环境建议书300字
2014/05/13 职场文书
2014年社区矫正工作总结
2014/11/18 职场文书
给领导的感谢信范文
2015/01/23 职场文书
运动会宣传语
2015/07/13 职场文书
话题作文之成长
2019/12/09 职场文书
Python各协议下socket黏包问题原理
2022/04/12 Python
VUE递归树形实现多级列表
2022/07/15 Vue.js