jq:mouseover和mouseout多次触发解决办法
区别:
mouseover与mouseenter
不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。
只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。
mouseout与mouseleave
不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件。
只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。
在#a没有子元素的情况下,两者在效果上没有区别
但是#a有子元素的情况下,为了mouseover,mouseout触发的此时就可能比mouseenter,mouseleave多
$("#a").mouseover(function(){ $(this).children().slideDown(1000); }).mouseout(function(){ $(this).children().slideUpt(1000); });
$("#a").mouseenter(function(){ $(this).children().slideDown(1000); }).mouseleave(function(){ $(this).children().slideUp(1000); });
而slideUp是个过程需要时间,但是mouseout,mouseover,mouseenter,mouseleave事件都是瞬间发生,多次触发会产生动画重复,这个可以用jq的stop方法阻止动画。
$("#a").mouseenter(function(){ $(this).children().stop().slideDown(1000); }).mouseleave(function(){ $(this).children().stop().slideUp(1000); });
jquery stop:
//语法结构
$("#div").stop();//停止当前动画,继续下一个动画
$("#div").stop(true);//清除元素的所有动画
$("#div").stop(false, true);//让当前动画直接到达末状态 ,继续下一个动画
$("#div").stop(true, true);//清除元素的所有动画,让当前动画直接到达末状态
jq:mouseover和mouseout多次触发解决办法的更多相关文章
- mouseover和mouseout多次触发解决方法(兼容ie和firefox)(转)
在用到mouseover和mouseout事件来作为事件触发的条件,但是如果我们用做触发的元素内部有其他的元素的时候当鼠标移上的时候会反复的触发mouseover和mouseout事件,如导致菜单闪烁 ...
- js当中mouseover和mouseout多次触发(非冒泡)
JS当中,mouseover和mouseout多次触发事件,不光是冒泡会产生,就是不冒泡,在一定条件下 ,也会产生多次触发事件: 例如下面的结构的情况下,我在class="ceng_up f ...
- Vue事件总线(eventBus)$on()会多次触发解决办法
项目中使用了事件总线eventBus来进行两个组件间的通信, 使用方法是是建立eventBus.js文件,暴露一个空的Vue实例,如下: import Vue from 'vue'export def ...
- mouseover和mouseout事件在鼠标经过子元素时也会触发
JavaScript的mouseover和mouseout事件,在绑定元素内部有子元素的情况下, 经过绑定元素时会多次触发mouseover和mouseout事件. jQuery解决办法: jquer ...
- vue -vantUI tab切换时 list组件不触发load事件解决办法
最近由于公司项目需要,用vue写了几个简单的页面.用到了vantUI List 列表 瀑布流滚动加载,用于控制长列表的展示 当列表即将滚动到底部时,会触发事件并加载更多列表项. (页面加载完成后默认会 ...
- 前端的事件冒泡(例如点击一次onclick事件执行两次)解决办法
问题概要: 当我运用antd 中 radio组件的时候发现radio组件是有bug的 就是你不能给他赋予id 和 value,同时也绑定不上onclick等事件.举个例子: 可以看到 你就算赋予了id ...
- 鼠标 mouseover和mouseout事件
在div内想实现鼠标移入移出效果,最开始的时候是用了jquery的mouseout和mouseover事件来实现的, $('.product).mouseover(function(){ …… }). ...
- mouseover和mouseout闪烁问题
在父级元素上注册了mouseover和mouseout事件后,当鼠标移动到子元素上时,会触发父级的mouseout和mouseover事件,反复触发,形成闪烁. 原因: 一种是由于冒泡,子级的mous ...
- jQuery中mouseover和mouseout冒泡产生闪烁问题
问题:在jQuery中,对元素绑定mouseover和mouseout事件时,每次移入移出该元素和子元素时,都会触发事件,从而会出现闪动的现象. 原因:浏览器的冒泡行为. 解决方案: 使用mousee ...
随机推荐
- python入门之生成器
生成器 通过列表生成式,可以直接创建一个列表,但是,受到内存限制,列表容量肯定是有限得.而且,创建一个包含100万个元素的列表,不仅占用很大的存储空间,如果仅仅需要访问前面几个元素,那后面绝大多数元素 ...
- Storm编程入门API系列之Storm的Topology多个tasks数目控制实现
前期博客 Storm编程入门API系列之Storm的Topology默认Workers.默认executors和默认tasks数目 Storm编程入门API系列之Storm的Topology多个Wor ...
- 关于Winform控件调用插入点(光标)的用法
我们自定义控件中可能会有一些光标的使用,比如插入文字和图片提示,下面是调用WIN32 API的光标用法 Winform控件调用插入点的用法 // 导入处理光标的 Windows 32 位 API // ...
- sizeof()用法汇总 zhuan
sizeof()功能:计算数据空间的字节数1.与strlen()比较 strlen()计算字符数组的字符数,以"\0"为结束判断,不计算为'\0'的数组元素. ...
- Android中的ListView属性使用总结
Android中使用ListView控件比较常见,如果能知道常用的一些属性使用,肯定会少很多坑. 1.ListView是常用的显示控件,默认背景是和系统窗口一样的透明色,如果给ListView加上背景 ...
- windows 操作系统种类
@hcy 敬请访问:http://blog.sina.com.cn/iihcy Microsoft公司从1983年开始研制Windows系统,最初的研制目标是在MS-DOS的基础上提供一个多任务的图形 ...
- openstack No valid host was found. There are not enough hosts available.
root@dell-PowerEdge-T30:~# gedit /var/log/nova/nova-conductor.logroot@dell-PowerEdge-T30:~# gedit /v ...
- 用Hexo免费搭建你自己的博客
Hexo基于node.js,可用于生成静态博客,结合github和Mac,可以专注创作了. 深入学习见文末引用. hexo安装 brew install node npm install hexo-c ...
- dubbo 分布式治理
1. dubbo 仅支持java语言之间的通讯. 2. dubbo 产生的背景是因为分布式的情况下产生的. 3. 解决服务治理的问题,通过注册中心进行管理 4.SOA 治理方案 tcp 协议传输,只需 ...
- ssh的server安装和安装指定版本的软件的方法
ssh程序分为有客户端程序openssh-client和服务端程序openssh-server.如果需要ssh登陆到别的电脑,需要安装openssh-client,该程序ubuntu是默认安装的.而如 ...