js中hover事件时候的BUG以及解决方法

Posted 2020-10-05 明明一颗大白菜

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()

　　完美解决！！！！