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

明明一颗大白菜      2022-02-13     127

关键词:

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

  完美解决!!!!



表单验证与回填以及表单常见bug解决方法

..."1"),但是他有一个bug,数据回填较慢,导致操作的时候数据为空,如果需要实时操作,可以把数据存在state了,然后在函数中操作~表单提交时,页面刷新,数据消失解决方法就是使用e.preventDefault();参数e最好从提交的时候绑... 查看详情

cocoapods的安装,升级以及升级以后出现bug的解决方法(升级必看!)

...库可以说是非常常见的事,但是要正确地配置他们有时候是非常繁琐的事情,幸运的是CocoaPods是一个很好的解决方案。相信大家很多人也在使用CocoaPods,但是最近CocoaPods升级到了1.0.0版本,升级后却出现很多的bug,报了很多错... 查看详情

移动端不触发touchend的解决方法以及后续影响问题的处理

...术A在写一个下拉刷新上拉加载功能的时候使用了touch系列事件编写下拉刷新,正常的触发过程应该是:touchstart→touchmove→touchend,但是在安卓手机端,touchend是在下一次触摸的时候才会触发,百度了,原因是主要是由于200ms超时... 查看详情

swipemenulistview在scrollview里上下滑动导致菜单不能显示完全的bug解决方法

这是因为上下滑动的时候,事件被ScrollView截获了,这时候应该禁止ScrollView截获上下滑动事件,解决方法如下publicclassNoRollSwipeMenuListViewextendsSwipeMenuListView{privateGestureDetectormGestureDetector;publicNoRollSwipeMenuListView(Contextcont 查看详情

滚动条挡住hover内容

...尝试);自己则是采用在鼠标在该区域下,监听鼠标滚轮事件,然后改变模块的position和top的值,来模拟出滚动效 查看详情

jquery中hover事件和click事件嵌套问题

...个b样式,也就是鼠标点击的颜色。给按钮绑定一个onclick事件,点击按钮把b样式添加给input标签追问你说的这个方法不是我要的,我还需要点击另外一个按钮后原来的变色按钮回到原来的颜色本回答被提问者和网友采纳 查看详情

通过阻止touchstart事件,解决移动端的bug

...calable=no依然不能阻止用户缩放。解决此BUG的方法是阻止PC事件:document.addEventListener(‘touchstart‘,function(ev){ev.preventDefault();});另外,此方法还能解决iOS10中横向页面溢出,即使给body设置了overflow:hidden依然能横向滑动的问题。不过 查看详情

方法中this指向的问题(代码片段)

...ole.log(this,1);,hide:function()console.log(this,2);//这次只是绑定了事件,真正调用时是在hover的时候//因此调用这个方法的实际是hover的元素$(".btn").hover(obj.show,obj.hide);//this指向调用obj.show这个方法的元素</script></body></html>这里... 查看详情

mouseenter和hover的区别

js中鼠标事件中,mouseenter和hover都可以达到,鼠标悬浮在目标上,触发事件,那么两者效果相同,有什么区别呢。  经过自己亲自试验。发现,mouseenter和hover还是有区别的。 hover在鼠标悬浮在目标上,触发事件,再离... 查看详情

自定义事件解决重复请求bug

现在,组件化开发还是比较流行的,毕竟其优点相当突出。最近在开发一个组件的时候,遇到了一个很有意思的BUG。。。 BUG的背景  最近在开发一个组件,好不容易开发好了转测试。然后,测试给我提了一个这样的bug,orz... 查看详情

记一次viewui框架的一个bug(代码片段)

...使用select下拉框时,莫名的发现一个问题,其中的on-change事件是在option发生改变的时候触发,但是在页面刚进来的时候也会触发这个事件,就感觉莫名奇妙,不知道是不是一个bug,但是还是最终解决了,解决方法如下;html:<Sel... 查看详情

记一次viewui框架的一个bug(代码片段)

...使用select下拉框时,莫名的发现一个问题,其中的on-change事件是在option发生改变的时候触发,但是在页面刚进来的时候也会触发这个事件,就感觉莫名奇妙,不知道是不是一个bug,但是还是最终解决了,解决方法如下;html:<Sel... 查看详情

原生js中6种常见的兼容问题以及解决方案

1.键盘检测兼容写方法varkey=e.keyCode||e.which||e.charCode;2.阻止冒泡事件冒泡的兼容e.stopPropagation?e.stopPropagation():e.cancelBubble=true;3.鼠标箭头事件对象的兼容 obj.onclick=function(evt)       查看详情

js中鼠标左右键以及中键的事件(代码片段)

在三维场景中有时候需要判断鼠标的事件,除了使用的click事件,只有鼠标左键有效,而右键无效。而对于onmousedown、onmouseup的时候鼠标的事件左键/右键有效。详细请看w3c上的资料。以下总结鼠标三个按键操作:首先,需要为wind... 查看详情

cocoapods的安装,升级以及升级以后出现bug的解决方法(升级必看!)

...库可以说是非常常见的事,但是要正确地配置他们有时候是非常繁琐的事情,幸运的是CocoaPods是一个很好的解决方案。相信大家很多人也在使用CocoaPods,但是最近CocoaPods升级到了1.0.0版本,升级后却出现很多的bug,报了很多错... 查看详情

firefox关于audio事件的bug及解决方案(代码片段)

...的时长audio.duration,在chrome中,可以给audio的canplay事件绑定函数获取时长,然后调用渲染标签的函数,但是在firefox中,以这种方式绑定 查看详情

js写导航栏hover效果

...ver效果,首先这个逻辑是:添加一个类名,鼠标移动上的时候就添加这个类名,鼠标不在这个元素上就移除类名,根据这个原理去进行变色的样子 查看详情

通过js添加的dom节点的click事件绑定不上的解决方案以及ios下click事件委派失效的解决方案

...如以下代码所示,通过js添加的Dom节点,在其上绑定点击事件,有的时候会出现点击事件不响应的情况,按照正常的理解,js代码具有阻塞性,Dom节点添加成功之后,就可以找到该节点并绑定事件,没有道理会出现事件绑定不上... 查看详情