hover事件是我们在开发前段时候遇到的稀松平常的问题,但是有没有发现会出现有一个BUg,比如,你移动到一个元素上,让它执行一个方法,然后你快速的移入移出的时候,他会进行亮瞎你眼睛的频闪效果,而且跟得了老年痴呆一样会进行延时显示,24K钛合金也会被闪瞎的,鼠标重复在相应区域滑动的时候,动画会一直执行,直到和鼠标经过的次数相同位置。比如鼠标移进3次,移出3次,动画就会出现三次。这显然是极度影响用户体验的。然后我们公司大后端告诉我说把mouseevent和monseleave合并成一个hover事件,还义正言辞的告诉我这是问题的所在(堂堂大前端竟然被后端的教育了,过分),然而我合并之后并没有什么卵用(啪啪的打脸),我就记得这是hover的不同写法罢了。好了,不闲扯了,开始说说自己的解决方法:

刚开始我想到的是事件冒泡或者事件捕获,由于我用的是dom结构是li里面包裹ul,所以就想到了事件捕获,那就去阻止事件捕获吧,

e.stopPropagation()
依旧闪,而且并没有解决。所以不是这个原因,那就从源头阻止

方法一:延迟误操作插件-hoverIntent

下载地址:http://www.jq22.com/jquery-info274
这个插件可以很好的解决这种Bug,防止误操作,兼容各个浏览器,包括恶心的IE6,良心推荐 方法二:jq的stop方法 在你的动画前面加一个stop()即可,我当时项目需要写的是slideup(),所以应该这样写
$("dom").stop(false,false).fadeUp()

  完美解决!!!!



js中hover事件时候的BUG以及解决方法的更多相关文章

  1. JS中循环绑定遇到的问题及解决方法

    本文是原创文章,如需转载,请注明文章出处 在工作中,有时会有这样的需求:在一个页面上添加了6个按钮,然后分别为他们绑定点击事件监听器,当点击按钮1时,输出1,当点击按钮2时,输出2. 循环绑定代码如下 ...

  2. 怎么理解js中的事件委托

    怎么理解js中的事件委托 时间 2015-01-15 00:59:59  SegmentFault 原文  http://segmentfault.com/blog/sunchengli/119000 ...

  3. js中冒泡事件和捕获事件

    js中冒泡事件和捕获事件: 冒泡事件:冒泡事件是从里向外,即是从被绑定元素开始一直向外到达页面的所有祖先元素都会被触发,这 一过程被称为事件冒泡.这个事件从原始元素开始一直冒泡到DOM树的最上层 捕获 ...

  4. 看懂此文,不再困惑于 JS 中的事件设计

    看懂此文,不再困惑于 JS 中的事件设计 今天刚在关注的微信公众号看到的文章,关于JS事件的,写的很详细也很容易理解,相关的知识点都有总结到,看完就有种很舒畅的感觉,该串起来的知识点都串起来了.反正一 ...

  5. js中冒泡事件

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. DOM 以及JS中的事件

    [DOM树节点] DOM节点分为三大节点:元素节点,文本节点,属性节点. 文本节点,属性节点为元素节点的两个子节点通过getElment系列方法,可以去到元素节点 [查看节点] 1 document. ...

  7. 从零开始的JS生活(二)——BOM、DOM与JS中的事件

    上回书说道,JS中变量.运算符.分支结构.循环和嵌套循环等内容.本回就由本K给大伙唠唠JS中的BOM.DOM和事件. 一."花心大萝卜"--BOM 1.震惊,FFF团为何对BOM举 ...

  8. js中的事件,内置对象,正则表达式

    [JS中的事件分类] 1.鼠标事件: click/dbclick/mouseover/mouseout/mousemove/mousedown/mouseup 2.键盘事件: keydown: 键盘按 ...

  9. JS中的事件以及DOM 操作

    [DOM树节点] DOM节点分为三大节点:元素节点,文本节点,属性节点. 文本节点,属性节点为元素节点的两个子节点通过getElment系列方法,可以去到元素节点 [查看节点] 1 document. ...

随机推荐

  1. MAC上类apt-get工具brew的安装与使用

    对于习惯了linux系统的人来说,使用yum或者apt-get来在线安装软件是一件非常愉快的事情.这些工具能够解决依赖问题.使得安装过程变得简单快捷. 在使用MAC的时候,也会想:MAC OS上有没有 ...

  2. 带命名空间的XML的dom4j应用<转>

    Element root = document.getRootElement();     List   recordenvlist = document.selectNodes("//gm ...

  3. 机器学习:K-Means聚类算法

    本文来自同步博客. 前面几篇文章介绍了回归或分类的几个算法,它们的共同点是训练数据包含了输出结果,要求算法能够通过训练数据掌握规律,用于预测新输入数据的输出值.因此,回归算法或分类算法被称之为监督学习 ...

  4. iscsi线缆

  5. Portal故障定位思路

  6. Codeforces 558C Amr and Chemistry 暴力 - -

    点击打开链接 Amr and Chemistry time limit per test 1 second memory limit per test 256 megabytes input stan ...

  7. GDI+(一):GDI+ 绘图基础

    一.GDI+绘图基础 编写图形程序时需要使用GDI(Graphics Device Interface,图形设备接口),从程序设计的角度看,GDI包括两部分:一部分是GDI对象,另一部分是GDI函数. ...

  8. ViZDoom安装

    官网:https://github.com/mwydmuch/ViZDoom/blob/master/doc/Building.md 环境:ubuntu16, python2.7, Anaconda2 ...

  9. imx6 i2c分析

    本文主要分析: 1. i2c设备注册 2. i2c驱动注册 3. 上层调用过程参考: http://www.cnblogs.com/helloworldtoyou/p/5126618.html 1. ...

  10. Spring 4 官方文档学习(十一)Web MVC 框架之multipart(文件上传)支持

    http://docs.spring.io/spring/docs/current/spring-framework-reference/html/mvc.html#mvc-multipart 1.简 ...