区别:

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. C# 文件操作 全收录 追加、拷贝、删除、移动文件、创建目录、递归删除文件夹及文件....

    本文收集了目前最为常用的C#经典操作文件的方法,具体内容如下:C#追加.拷贝.删除.移动文件.创建目录.递归删除文件夹及文件.指定文件夹下 面的所有内容copy到目标文件夹下面.指定文件夹下面的所有内 ...

  2. Linux下Java运行.class文件,报错找不到或无法加载主类

    classpath配置的错误,所以找不到.class文件. 原先的etc/profile中的classpath配置 export CLASSPATH=$JAVA_HOME/lib/tools.jar ...

  3. Sawgger框架

    简介详情:https://blog.csdn.net/sanyaoxu_2/article/details/80555328

  4. E. The Best among Equals

    http://codeforces.com/gym/101149/problem/E 这题的话,关键是注意到一定是要max score 然后就可以选出一个L最大优先,并且R最大的区间, 扫一次就能得到 ...

  5. 一个页面有相同ID元素的情况分析

    经常会遇到一个页面中有相同定义相同id的情况,从道理上来说,id应该是这个页面中某个元素的唯一标识,所以不应该出现有相同id的情况,否则会产生意想不到的结果.而且各个浏览器的表现也是不一样的.我只做了 ...

  6. 如何在cmd中运行PHP

    我的php安装目录在 d:\php 那么 运行 cmd >d: >cd php 要让工作目录指向php.exe的安装文件夹 然后就可以用php指令了 比如 在该文件夹下面新建一个test. ...

  7. linux 简单的mysql备份和导入,以及文件的备份和导入

    一,数据库的备份与导入 1),数据库的备份 1.导出整个数据库 mysqldump -u 用户名 -p 数据库名 > 导出的文件名 例:mysqldump -u dbadmin -p myblo ...

  8. 浅谈Hibernate中的三种数据状态

    Hibernate中的三种数据状态:临时.持久.游离 1.临时态(瞬时态) 不存在于session中,也不存在于数据库中的数据,被称为临时态. 数据库中没有数据与之对应,超过作用域会被JVM垃圾回收器 ...

  9. Android 检查内存溢出

    工具网址:https://github.com/square/leakcanary 中文版说明地址:http://www.liaohuqiu.net/cn/posts/leak-canary-read ...

  10. Jquery AJAX使用踩坑小记

    在使用jquery ajax时,如果其参数是一个json对象,将此参数使用$('#dd').data(param)绑定到一个元素上, 在使用$('#dd').bind('click',function ...