区别:

mouseover与mouseenter

  不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。

  只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。

mouseout与mouseleave

  不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件。

  只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。

在#a没有子元素的情况下,两者在效果上没有区别

但是#a有子元素的情况下,为了mouseovermouseout触发的此时就可能比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多次触发解决办法的更多相关文章

  1. mouseover和mouseout多次触发解决方法(兼容ie和firefox)(转)

    在用到mouseover和mouseout事件来作为事件触发的条件,但是如果我们用做触发的元素内部有其他的元素的时候当鼠标移上的时候会反复的触发mouseover和mouseout事件,如导致菜单闪烁 ...

  2. js当中mouseover和mouseout多次触发(非冒泡)

    JS当中,mouseover和mouseout多次触发事件,不光是冒泡会产生,就是不冒泡,在一定条件下 ,也会产生多次触发事件: 例如下面的结构的情况下,我在class="ceng_up f ...

  3. Vue事件总线(eventBus)$on()会多次触发解决办法

    项目中使用了事件总线eventBus来进行两个组件间的通信, 使用方法是是建立eventBus.js文件,暴露一个空的Vue实例,如下: import Vue from 'vue'export def ...

  4. mouseover和mouseout事件在鼠标经过子元素时也会触发

    JavaScript的mouseover和mouseout事件,在绑定元素内部有子元素的情况下, 经过绑定元素时会多次触发mouseover和mouseout事件. jQuery解决办法: jquer ...

  5. vue -vantUI tab切换时 list组件不触发load事件解决办法

    最近由于公司项目需要,用vue写了几个简单的页面.用到了vantUI List 列表 瀑布流滚动加载,用于控制长列表的展示 当列表即将滚动到底部时,会触发事件并加载更多列表项. (页面加载完成后默认会 ...

  6. 前端的事件冒泡(例如点击一次onclick事件执行两次)解决办法

    问题概要: 当我运用antd 中 radio组件的时候发现radio组件是有bug的 就是你不能给他赋予id 和 value,同时也绑定不上onclick等事件.举个例子: 可以看到 你就算赋予了id ...

  7. 鼠标 mouseover和mouseout事件

    在div内想实现鼠标移入移出效果,最开始的时候是用了jquery的mouseout和mouseover事件来实现的, $('.product).mouseover(function(){ …… }). ...

  8. mouseover和mouseout闪烁问题

    在父级元素上注册了mouseover和mouseout事件后,当鼠标移动到子元素上时,会触发父级的mouseout和mouseover事件,反复触发,形成闪烁. 原因: 一种是由于冒泡,子级的mous ...

  9. jQuery中mouseover和mouseout冒泡产生闪烁问题

    问题:在jQuery中,对元素绑定mouseover和mouseout事件时,每次移入移出该元素和子元素时,都会触发事件,从而会出现闪动的现象. 原因:浏览器的冒泡行为. 解决方案: 使用mousee ...

随机推荐

  1. JAVA常用知识总结(九)——线程

    sleep和wait的区别? sleep()来自Thread类,和wait()来自Object类.调用sleep()方法的过程中,线程不会释放对象锁.而 调用 wait 方法线程会释放对象锁 slee ...

  2. C++ Sort类成员的传递

    C++模板中提供了sort方法,一般有两种方法:传递函数,传递一个对象. 第一种方法:函数 bool compare(const string &strLeft, const string & ...

  3. 在spring的过滤器中注入实体类(@autowire会失效可使用这个方法)

    转载:难得可贵的好文章 https://blog.csdn.net/chl191623691/article/details/78657638 首先,本文   绝对是好文!不止本文,作者的文章都是很经 ...

  4. jQuery取得/设置select的值

    本来以为jQuery("#select1").val();是取得选中的值, 那么jQuery("#select1").text();就是取得的文本. 这是不正确 ...

  5. Spring框架学习——AOP的开发

    一.AOP开发中的相关术语. ——JoinPoint(连接点):指那些可以被拦截到的点.比如增删改查方法都可以增强,这些方法就可以被称为是连接点. ——PointCut:切入点,真正被拦截的点,指对哪 ...

  6. debian中sudo无法使用问题

    原文链接:http://sharadchhetri.com/2013/08/07/sudo-command-not-found-debian-7/ To solve this issue instal ...

  7. zuul filter

    前言 过滤器是Zuul的核心组件,这篇文章我们来详细讨论Zuul的过滤器.下面话不多说,来看看详细的介绍吧. 过滤器类型与请求生命周期 Zuul大部分功能都是通过过滤器来实现的.Zuul中定义了四种标 ...

  8. this详解,对执行上下文说 Yes

    this 指向多变,很多隐蔽的 bug 都缘于它.与此同时,this 强大灵活,如果能熟练驾驭,就会写出更简洁.优雅的代码. 社区上对于 this 的讲解虽然不少,但缺乏统一梳理. this 相关知识 ...

  9. Android View 背景选择器编写技巧

    在项目中选择器的使用是非常多的,以下是本人在项目中的一些常用的背景选择器的写法 带边框下划线背景选择器效果图: 上面布局中放了10个CheckBox,然后设置了CheckBox的背景图片位,背景选择器 ...

  10. android 常用第三方github工程

    这里有个汇总的网址:http://androidxy.com/zh/page/latest/-1/0 数据库:greenDao 参考:GreenDao3.2的使用 控件注解:Butterknife 图 ...