完美解决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 相关文章推荐
js同时按下两个方向键
Dec 01 Javascript
Javascript学习笔记之函数篇(五) : 构造函数
Nov 23 Javascript
node.js中的http.response.writeHead方法使用说明
Dec 14 Javascript
JavaScript实现图片轮播组件代码示例
Nov 22 Javascript
javascript 数组去重复(在线去重工具)
Dec 17 Javascript
Three.js中网格对象MESH的属性与方法详解
Sep 27 Javascript
用vue封装插件并发布到npm的方法步骤
Oct 18 Javascript
原生JavaScript实现的简单放大镜效果示例
Feb 07 Javascript
对Vue table 动态表格td可编辑的方法详解
Aug 28 Javascript
详解django模板与vue.js冲突问题
Jul 07 Javascript
微信小程序实现星星评分效果
Nov 01 Javascript
微信小程序APP的生命周期及页面的生命周期
Apr 19 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
攻克CakePHP系列一 连接MySQL数据库
2008/10/22 PHP
PHP session有效期问题
2009/04/26 PHP
CI框架整合widget(页面格局)的方法
2016/05/17 PHP
php版微信返回用户text输入的方法
2016/11/14 PHP
javascript实现验证身份证号的有效性并提示
2015/04/30 Javascript
js中不同的height, top的区别对比
2015/09/24 Javascript
js 将input框中的输入自动转化成半角大写(税号输入框)
2017/02/16 Javascript
jquery中done和then的区别(详解)
2017/12/19 jQuery
JS设计模式之状态模式概念与用法分析
2018/02/05 Javascript
koa-router路由参数和前端路由的结合详解
2019/05/19 Javascript
js JSON.stringify()基础详解
2019/06/19 Javascript
监控Nodejs的性能实例代码
2019/07/02 NodeJs
vue.js购物车添加商品组件的方法
2019/09/17 Javascript
JQuery常用简单动画操作方法回顾与总结
2019/12/07 jQuery
解决vue cli4升级sass-loader(v8)后报错问题
2020/07/30 Javascript
arcgis.js控制地图地体的显示范围超出区域自动弹回(实现思路)
2021/01/28 Javascript
Python实现代码统计工具(终极篇)
2016/07/04 Python
Python3.7中安装openCV库的方法
2018/07/11 Python
python 求1-100之间的奇数或者偶数之和的实例
2019/06/11 Python
Python 堆叠柱状图绘制方法
2019/07/29 Python
python3.6编写的单元测试示例
2019/08/17 Python
pandas数据处理进阶详解
2019/10/11 Python
python实现的批量分析xml标签中各个类别个数功能示例
2019/12/30 Python
pytorch中的上采样以及各种反操作,求逆操作详解
2020/01/03 Python
使用python爬取抖音app视频的实例代码
2020/12/01 Python
Python爬虫进阶之爬取某视频并下载的实现
2020/12/08 Python
使用HTML5的Notification API制作web通知的教程
2015/05/08 HTML / CSS
DJI大疆无人机官方商城:全球领先的无人飞行器研发和生产商
2016/12/21 全球购物
台湾网友喜爱的综合型网路购物商城:Yahoo! 奇摩购物中心
2018/03/10 全球购物
教师现实表现材料
2014/02/14 职场文书
《乞巧》教学反思
2014/02/27 职场文书
公务员平时考核实施方案
2014/03/11 职场文书
2015年社区卫生工作总结
2015/04/21 职场文书
田径运动会广播稿
2015/08/19 职场文书
Golang Elasticsearches 批量修改查询及发送MQ
2022/04/19 Golang
Android在Sqlite3中的应用及多线程使用数据库的建议
2022/04/24 Java/Android