完美解决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之网页换肤实现代码
Apr 30 Javascript
javascript中的=等号个数问题两个跟三个有什么区别
Oct 23 Javascript
js识别不同浏览器基于userAgent做判断
Jul 29 Javascript
jQuery实现的导航动画效果(附demo源码)
Apr 01 Javascript
老生常谈JavaScript 正则表达式语法
Aug 20 Javascript
jQuery编写网页版2048小游戏
Jan 06 Javascript
前端自动化开发之Node.js的环境搭建教程
Apr 01 Javascript
利用不到200行代码写一款属于你自己的js类库
Jul 08 Javascript
JS实现音乐钢琴特效
Jan 06 Javascript
详解JavaScript 事件流
Sep 02 Javascript
vue 将多个过滤器封装到一个文件中的代码详解
Sep 05 Javascript
vue实现倒计时功能
Mar 24 Vue.js
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模板中出现空行解决方法
2011/03/08 PHP
PHP检测移动设备类mobile detection使用实例
2014/04/14 PHP
php微信开发之百度天气预报
2016/11/18 PHP
开发 Internet Explorer 右键功能表(ContextMenu)
2013/07/03 Javascript
Jquery判断$("#id")获取的对象是否存在的方法
2013/09/25 Javascript
jQuery插件制作之参数用法实例分析
2015/06/01 Javascript
利用Angularjs中模块ui-route管理状态的方法
2016/12/27 Javascript
canvas的神奇用法
2017/02/03 Javascript
简单实现AngularJS轮播图效果
2020/04/10 Javascript
Vue.js 2.0 移动端拍照压缩图片预览及上传实例
2017/04/27 Javascript
js实现添加删除表格(两种方法)
2017/04/27 Javascript
JavaScript事件处理程序详解
2017/09/19 Javascript
dropload.js插件下拉刷新和上拉加载使用详解
2017/10/20 Javascript
浅谈vue的props,data,computed变化对组件更新的影响
2018/01/16 Javascript
node.js 模块和其下载资源的镜像设置的方法
2018/09/06 Javascript
Vue+Element UI+Lumen实现通用表格分页功能
2019/02/02 Javascript
js中的深浅拷贝问题简析
2019/05/10 Javascript
js实现无限瀑布流实例方法
2019/09/16 Javascript
js面向对象之实现淘宝放大镜
2020/01/15 Javascript
JavaScript基于面向对象实现的无缝滚动轮播示例
2020/01/17 Javascript
微信小程序实现可长按移动控件
2020/11/01 Javascript
详解Python 调用C# dll库最简方法
2019/06/20 Python
Django Haystack 全文检索与关键词高亮的实现
2020/02/17 Python
pymysql 插入数据 转义处理方式
2020/03/02 Python
Python批量删除mysql中千万级大量数据的脚本分享
2020/12/03 Python
如何利用python 读取配置文件
2021/01/06 Python
Under Armour安德玛意大利官网:美国高端运动科技品牌
2020/01/16 全球购物
如何写自我鉴定
2014/03/19 职场文书
民族学专业求职信
2014/07/28 职场文书
师德师风自查总结
2014/10/14 职场文书
2014年医院个人工作总结
2014/12/09 职场文书
结婚老公保证书
2015/02/26 职场文书
婚宴父母致辞
2015/07/27 职场文书
推普标语口号大全
2015/12/26 职场文书
Redis三种集群模式详解
2021/10/05 Redis
MySQL 自动填充 create_time 和 update_time
2022/05/20 MySQL