用jquery,mouseout,mouseover,随着鼠标移动,事件被触发了多次(冒泡),换成js onmouseover,onmouseout也是一样。最终的解决办法是,用jquery,mouseleave代替mouseout;mouseenter代替mouseover。

mouseleave,mouseenter鼠标离开,进入最外层标签时触发事件。

mouseout,mouseover鼠标离开,进入里面标签时触发事件。

1,单个内部元素,无区别

  1. <div id="test2" >
  2. <img src='test1.jpg'>
  3. </div>
  4. $("#test2").mouseleave(function(){
  5. console.log('out');
  6. }).mouseenter(function(){
  7. console.log('in');
  8. });
  9. $("#test2").mouseout(function(){
  10. console.log('out');
  11. }).mouseover(function(){
  12. console.log('in');
  13. });

上面二代码JS代码分别执行,执行的结果是一样的。mouseover,onmouseover,mouseenter一样,mouseout,onmouseout,mouseleave一样

2,多个内部元素,mouseleave,mouseenter只会执行一次

  1. <div id="test2" >
  2. <ul>
  3. <li>test</li>
  4. <li>test1</li>
  5. <li>test2</li>
  6. <li>test3</li>
  7. <li>test4</li>
  8. </ul>
  9. </div>

如果将html代码换成ul这种形势,当鼠标进入,离开div时,mouseleave,mouseenter只会执行一次,而其他的,随着鼠标在ul的每个li之间进行滑动时,都会被执行。

jquery mouseout mouseover 多次执行的更多相关文章

  1. jQuery mouseover,mouseout事件多次执行的问题处理

    控制鼠标移上移下事件,在使用Jquery 的mouseover,mouseout事件时,元素内部含有其它元素,会造成该事件多次的触发的情况. 问题解析 在用到mouseover和mouseout事件来 ...

  2. jQuery因mouseover,mouseout冒泡产生的闪烁问题

    由于浏览器的冒泡行为.造成如果在一个DIV元素上同时定义了mouseover,mouseout的时候,当鼠标移动到DIV中的child子元素的时候,就会同时执行了两个操作mouseover和mouse ...

  3. jquery中mouseover和mouseenter的区别

    jquery中mouseover和mouseenter的区别 一.总结 一句话总结: 见名知意:enter(进入)和over(在上方)的意思好好思考一下 mouseover就是从子元素回到自己的时候也 ...

  4. JQuery html API支持解析执行Javascript脚本功能实现-代码分析

    JQuery html用法(功能类似innerHTML) 开发中需要使用Ajax技术来更新页面局部区域, 使用的方法是ajax获取html代码段(字符串),然后将这个html代码段作为参数,传入目标D ...

  5. jQuery使用伪递归重复执行动画

    使用setInterval()来重复执行动画,会因为动画执行过程的时候,setInterval()的时间依然是在走的,所以会导致动画的调用时间不理想,因此只能使用递归来重复执行动画. // 首页LOG ...

  6. DOM函数和jQuery函数的覆盖与执行顺序

    <script type="text/javascript"> window.onload = function () { alert(); } window.onlo ...

  7. jquery ajax 中各个事件执行顺序

    jquery ajax 中各个事件执行顺序如下: 1.ajaxStart(全局事件) 2.beforeSend 3.ajaxSend(全局事件) 4.success 5.ajaxSuccess(全局事 ...

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

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

  9. jQuery事件--mouseover()、mouseout()、mouseenter()和mouseleave()

       mouseover([[data],fn]) 概述 当鼠标指针位于元素上方时,会发生 mouseover 事件.该事件大多数时候会与 mouseout 事件一起使用 注释:与 mouseente ...

随机推荐

  1. 【网络】 应用&传输层笔记

    应用层 应用层常用的协议和各自对应的TCP/UDP端口: DNS TCP/UDP 53 HTTP TCP 80 SMTP TCP 25 POP UDP 110 Telnet TCP 23 DHCP U ...

  2. js实现单双行文本溢出添加省略号

    # 单双行文本溢出省略 ``` // 2. 当内容过多的时候,单行省略号: overflow: hidden; text-overflow:ellipsis; white-space: nowrap; ...

  3. Struct_2路径问题

    今天在自学那个Struct2的知识点的时候,发现那个相对路径和绝对路径有点遗忘.特地去看了视频还有在百度上查了一些资料.我觉得这个路径问题对于我这个初学者来说还是有点容易遗忘的.所以,今天就添加这个新 ...

  4. Spring-MongoDB 关键类的源码分析

    本文分析的是 spring-data-mongodb-1.9.2.RELEASE.jar 和 mongodb-driver-core-3.2.2.jar. 一.UML Class Diagram 核心 ...

  5. JavaWeb学习笔记八 监听器

    监听器Listener jservlet规范包括三个技术点:servlet :listener :filter:监听器就是监听某个对象的的状态变化的组件.监听器的相关概念事件源: 被监听的对象(三个域 ...

  6. 使用IDEA配置Maven + SpringMVC + Mybatis 【一步一步踩坑详细配置完成】

    PS:初学,想使用Maven配置一个SpringMVC的开发环境,照着网上的各种图文解说,配置了好久都没成功,有些写的不够详细,有些只有写一半,走了不少弯弯绕绕,踩了不少的坑,此文将正确配置成功的步骤 ...

  7. 201621123057 《Java程序设计》第14周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结与数据库相关内容. 2. 使用数据库技术改造你的系统 2.1 简述如何使用数据库技术改造你的系统.要建立什么表?截图你的表设计. 答 ...

  8. android 检查软件是否有更新版本

    import java.net.HttpURLConnection; import java.net.URL; import java.util.HashMap; import com.yuxin.m ...

  9. ExecutorService实际上是一个线程池的管理工具

    在Java5之后,并发线程这块发生了根本的变化,最重要的莫过于新的启动.调度.管理线程的一大堆API了.在Java5以后,通过Executor来启动线程比用 Thread的start()更好.在新特征 ...

  10. Linux 下的权限改变与目录配置

    Linux 下的权限改变与目录配置 ./代表本目录的意思. (1):用户与用户组, 1:文件所有者,文件被某一用户所有 2:用户组:    对文件给与一个或者多个用户权限配置 3:其它人: (2):l ...