完美解决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 CSS修改学习第六章 拖拽
Feb 19 Javascript
js判断屏幕分辨率的代码
Jul 16 Javascript
3分钟写出来的Jquery版checkbox全选反选功能
Oct 23 Javascript
Javascript 按位左移运算符使用介绍(
Feb 04 Javascript
JavaScript返回0-1之间随机数的方法
Apr 06 Javascript
jQuery菜单插件用法实例
Jul 25 Javascript
Node.js操作Firebird数据库教程
Mar 04 Javascript
JS中的==运算: [''] == false —>true
Jul 24 Javascript
vue 挂载路由到头部导航的方法
Nov 13 Javascript
Angular实现的内置过滤器orderBy排序与模糊查询功能示例
Dec 29 Javascript
JavaScript基于面向对象实现的猜拳游戏
Jan 03 Javascript
基于纯JS实现多张图片的懒加载Lazy过程解析
Oct 14 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实现MVC开发得最简单的方法――模型
2007/04/10 PHP
PHP用身份证号获取星座和生肖的方法
2013/11/07 PHP
php事务处理实例详解
2014/07/11 PHP
项目中应用Redis+Php的场景
2016/05/22 PHP
php计数排序算法的实现代码(附四个实例代码)
2020/03/31 PHP
phpStudy vscode 搭建debug调试的教程详解
2020/07/28 PHP
document.getElementById为空或不是对象的解决方法
2010/01/24 Javascript
JS实现距离上次刷新已过多少秒示例
2014/05/23 Javascript
Javascript学习笔记之 函数篇(三) : 闭包和引用
2014/11/23 Javascript
原生JS实现美图瀑布流布局赏析
2015/09/07 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
2016/05/12 Javascript
利用Angular.js限制textarea输入的字数
2016/10/20 Javascript
Bootstrap多级菜单的实现代码
2017/05/23 Javascript
详解Vue使用命令行搭建单页面应用
2017/05/24 Javascript
详解Vue-Cli 异步加载数据的一些注意点
2017/08/12 Javascript
详解小程序循环require之坑
2019/03/08 Javascript
node.js使用net模块创建服务器和客户端示例【基于TCP协议】
2020/02/14 Javascript
JavaScript 声明私有变量的两种方式
2021/02/05 Javascript
深入理解Python中字典的键的使用
2015/08/19 Python
Python 逐行分割大txt文件的方法
2017/10/10 Python
Django框架实现的简单分页功能示例
2018/12/04 Python
python多线程实现TCP服务端
2019/09/03 Python
python统计指定目录内文件的代码行数
2019/09/19 Python
python3中pip3安装出错,找不到SSL的解决方式
2019/12/12 Python
深入理解Python变量的数据类型和存储
2021/02/01 Python
CSS3中的opacity属性使用教程
2015/08/19 HTML / CSS
Html5元素及基本语法详解
2016/08/02 HTML / CSS
商业计算机应用专业自荐书
2014/06/09 职场文书
交警作风整顿剖析材料
2014/10/11 职场文书
公务员考察材料
2014/12/23 职场文书
专项资金申请报告
2015/05/15 职场文书
毕业典礼致辞
2015/07/29 职场文书
九九重阳节致辞
2015/07/31 职场文书
团支部书记竞选稿
2015/11/21 职场文书
先进党支部事迹材料2016
2016/02/26 职场文书
关于感恩的素材句子(38句)
2019/11/11 职场文书