js中hover事件时候的BUG以及解决方法
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以及解决方法的更多相关文章
- JS中循环绑定遇到的问题及解决方法
本文是原创文章,如需转载,请注明文章出处 在工作中,有时会有这样的需求:在一个页面上添加了6个按钮,然后分别为他们绑定点击事件监听器,当点击按钮1时,输出1,当点击按钮2时,输出2. 循环绑定代码如下 ...
- 怎么理解js中的事件委托
怎么理解js中的事件委托 时间 2015-01-15 00:59:59 SegmentFault 原文 http://segmentfault.com/blog/sunchengli/119000 ...
- js中冒泡事件和捕获事件
js中冒泡事件和捕获事件: 冒泡事件:冒泡事件是从里向外,即是从被绑定元素开始一直向外到达页面的所有祖先元素都会被触发,这 一过程被称为事件冒泡.这个事件从原始元素开始一直冒泡到DOM树的最上层 捕获 ...
- 看懂此文,不再困惑于 JS 中的事件设计
看懂此文,不再困惑于 JS 中的事件设计 今天刚在关注的微信公众号看到的文章,关于JS事件的,写的很详细也很容易理解,相关的知识点都有总结到,看完就有种很舒畅的感觉,该串起来的知识点都串起来了.反正一 ...
- js中冒泡事件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- DOM 以及JS中的事件
[DOM树节点] DOM节点分为三大节点:元素节点,文本节点,属性节点. 文本节点,属性节点为元素节点的两个子节点通过getElment系列方法,可以去到元素节点 [查看节点] 1 document. ...
- 从零开始的JS生活(二)——BOM、DOM与JS中的事件
上回书说道,JS中变量.运算符.分支结构.循环和嵌套循环等内容.本回就由本K给大伙唠唠JS中的BOM.DOM和事件. 一."花心大萝卜"--BOM 1.震惊,FFF团为何对BOM举 ...
- js中的事件,内置对象,正则表达式
[JS中的事件分类] 1.鼠标事件: click/dbclick/mouseover/mouseout/mousemove/mousedown/mouseup 2.键盘事件: keydown: 键盘按 ...
- JS中的事件以及DOM 操作
[DOM树节点] DOM节点分为三大节点:元素节点,文本节点,属性节点. 文本节点,属性节点为元素节点的两个子节点通过getElment系列方法,可以去到元素节点 [查看节点] 1 document. ...
随机推荐
- 基于jplayer实现歌词同步的JS音乐播放器效果
分享一款基于jplayer实现歌词同步的JS音乐播放器效果.这是一款基于jQuery实现的音乐播放器功能代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <textare ...
- nio入门教程
1.通过拿NIO和传统IO做对比来了解NIO 面向流与面向缓冲 Java NIO和IO之间第一个最大的区别是,IO是面向流的,NIO是面向缓冲区的. Java IO面向流意味着每次从流中读一个或多个字 ...
- FireFox火狐不能收藏书签
这个问题遇到过好几次了,最好还是记一下. 方法有以下几种: 禁用拓展:附加组件管理器. http://tieba.baidu.com/p/3034493996 禁用拓展:tab mix plus. h ...
- [Makefile]多目录Makefile写法
最近需要写一个测试程序,这个测试程序需要集成一些功能,写在同一个文件看上去很不好,多个文件的Makefile又不是很熟,于是分享下面这篇文章 先介绍下,调试Makefile时,想知道某个变量的值,怎么 ...
- JAVA 监控工具 VisualVM 插件路径配置地址
在使用VisualVM监控工具的时候,发现无法安装或者更新插件,或者报错,最后发现原来是插件中心的URL地址原装地址就不对.根据官方网站的地址配置后就正常了.下面的具体地址. VisualVMRele ...
- R语言扩展包dplyr笔记
引言 2014年刚到, 就在 Feedly 订阅里看到 RStudio Blog 介绍 dplyr 包已发布 (Introducing dplyr), 此包将原本 plyr 包中的 ddply() 等 ...
- 受打击了:你是学.net 的吧?
我在网上投了简历,今天去面试, 去到才知道有面试题做,做完之后自知答的很烂. 没想到面试我的那个人,一开始就很直接,说: 我感觉你很喜欢用英语, 但英语很烂 我觉得你很喜欢用别人的东西, 但技术水平很 ...
- VHD和VHDX
VHD和VHDX没有太大区别,只是最大容量不一样,用是一样用,一定要转用ghost11,是新建vhdx,然后把vhd和vhdx个挂载,之后用ghost11分区到分区还原. VHD和VHDX简介 相对之 ...
- am335x 10.1"电容touch 不能识别
/**************************************************************** * am335x 10.1"电容touch 不能识别 * ...
- Swift数值运算
Swift 让全部数值类型都支持了主要的四则运算: 加法(+) 减法(-) 乘法(*) 除法(/) 1 + 2 // 等于 3 5 - 3 // 等于 2 2 * 3 // 等于 6 10.0 / 2 ...