完美解决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 UI皮肤定制
Jul 27 Javascript
JavaScript 关键字屏蔽实现函数
Aug 02 Javascript
JS实现Enter键跳转及控件获得焦点
Aug 12 Javascript
JS+CSS实现淡入式焦点图片幻灯切换效果的方法
Feb 26 Javascript
非常实用的12个jquery代码片段
Nov 02 Javascript
jQuery position() 函数详解以及jQuery中position函数的应用
Dec 14 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
Aug 11 Javascript
js实现一个简单的数字时钟效果
Mar 29 Javascript
JavaScript实现二叉树的先序、中序及后序遍历方法详解
Oct 26 Javascript
Vue自定义过滤器格式化数字三位加一逗号实现代码
Mar 23 Javascript
详解swiper在vue中的应用(以3.0为例)
Sep 20 Javascript
JS的时间格式化和时间戳转换函数示例详解
Jul 27 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
一个分页的论坛
2006/10/09 PHP
windows7下安装php的php-ssh2扩展教程
2014/07/04 PHP
PHP处理JSON字符串key缺少双引号的解决方法
2014/09/16 PHP
培养自己的php编码规范
2015/09/28 PHP
php查询操作实现投票功能
2016/05/09 PHP
PHP-FPM运行状态的实时查看及监控详解
2016/11/18 PHP
用PHP将Unicode 转化为UTF-8的实现方法(推荐)
2017/02/08 PHP
JavaScript生成GUID的多种算法小结
2013/08/18 Javascript
2014年50个程序员最适用的免费JQuery插件
2014/12/15 Javascript
四种参数传递的形式——URL,超链接,js,form表单
2015/07/24 Javascript
jQuery实现的个性化返回底部与返回顶部特效代码
2015/10/30 Javascript
javascript倒计时效果实现
2015/11/12 Javascript
跟我学习javascript的执行上下文
2015/11/18 Javascript
WordPress中利用AJAX异步获取评论用户头像的方法
2016/01/08 Javascript
gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
2016/02/21 Javascript
JavaScript中的对象继承关系
2016/08/01 Javascript
微信小程序 wxapp画布 canvas详细介绍
2016/10/31 Javascript
React Router v4 入坑指南(小结)
2018/04/08 Javascript
vue自定义指令的创建和使用方法实例分析
2018/12/04 Javascript
使用mixins实现elementUI表单全局验证的解决方法
2019/04/02 Javascript
JS window对象简单操作完整示例
2020/01/14 Javascript
python读写json文件的简单实现
2017/04/11 Python
django连接mysql数据库及建表操作实例详解
2019/12/10 Python
pytorch torchvision.ImageFolder的用法介绍
2020/02/20 Python
python批量提取图片信息并保存的实现
2021/02/05 Python
css3动画效果小结(推荐)
2016/07/25 HTML / CSS
小女主人连衣裙:Little Mistress
2017/07/10 全球购物
Ootori在线按摩椅店:一家专业的按摩椅制造商
2019/04/10 全球购物
班委竞选演讲稿
2014/04/28 职场文书
2015年社区综治宣传月活动总结
2015/03/25 职场文书
2015年员工试用期工作总结
2015/05/28 职场文书
2016年十一促销广告语
2016/01/28 职场文书
人生感悟经典句子
2019/08/20 职场文书
python 常用的异步框架汇总整理
2021/06/18 Python
SpringBoot整合Mybatis Generator自动生成代码
2021/08/23 Java/Android
一文彻底理解js原生语法prototype,__proto__和constructor
2021/10/24 Javascript