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+selenium 页面中存在选项卡时,获取页面内容的小技巧
最近用selenium读取页面内容时,遇到包含选项卡的页面,由于选项卡多由js加载其中的内容,所以在网址打开时只能获取到默认显示的选项卡中的内容,而tab2.tab3等等都需要傻傻的点击一下才会获取到 ...
- Help with Intervals(集合的交并补,线段树)
很早以前做过这题,早就没印象了,估计当时也是照着某大神的代码抄过的,现在是连题意都看了好长时间. 刚开始的S集合是空集,给你一些操作和一个T集合,把操作的结果再赋给S集合. 解法:因为会有开区间和闭区 ...
- 如何连接MDB数据,并且获取相关的数据
不说了直接上代码: try{ String str = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source='" + address + & ...
- 一起来学Spring Cloud | 第三章:服务消费者 (负载均衡Ribbon)
一.负载均衡的简介: 负载均衡是高可用架构的一个关键组件,主要用来提高性能和可用性,通过负载均衡将流量分发到多个服务器,多服务器能够消除单个服务器的故障,减轻单个服务器的访问压力. 1.服务端负载均衡 ...
- java maven cxf笔记
IDE: 一:新建Maven项目 1.File->New->Project.. 2. 3. 4. 二:添加cxf和jetty依赖 <dependencies> <!- ...
- js原生子级元素阻止父级元素冒泡事件
<html> <head> <style type="text/css"> #hide{ width:75%;height:80px;backg ...
- error: stray '\343' in program 问题解决
当我们从网上copy一段代码后,总会出现这个问题.博主在Arduino环境中也出现了,so,这个问题应该是C语言和C++编译器中才会出现的. test_int:19: error: str ...
- COGS 1427. zwei
★☆ 输入文件:zwei.in 输出文件:zwei.out 简单对比时间限制:1 s 内存限制:256 MB [样例输入] 5 5 1 2 3 4 5 1 1 3 1 3 5 0 ...
- 在linux下面安装mysql 确认 配置文件路径 my.cnf
1.确认服务器my.cnf 文件路径.但不知道那个是 2.通过which mysql命令来查看mysql的安装位置: 3.通过/usr/local/mysql/bin/mysqld --verbose ...
- 添加 SSH 公钥
生成 SSH 密钥 ssh-keygen -t rsa -C "YOUR_EMAIL@YOUREMAIL.COM" 获取 SSH 公钥信息 cat ~/.ssh/id_rsa.pu ...