jquery mouseout mouseover 多次执行
用jquery,mouseout,mouseover,随着鼠标移动,事件被触发了多次(冒泡),换成js onmouseover,onmouseout也是一样。最终的解决办法是,用jquery,mouseleave代替mouseout;mouseenter代替mouseover。
mouseleave,mouseenter鼠标离开,进入最外层标签时触发事件。
mouseout,mouseover鼠标离开,进入里面标签时触发事件。
1,单个内部元素,无区别
- <div id="test2" >
- <img src='test1.jpg'>
- </div>
- $("#test2").mouseleave(function(){
- console.log('out');
- }).mouseenter(function(){
- console.log('in');
- });
- $("#test2").mouseout(function(){
- console.log('out');
- }).mouseover(function(){
- console.log('in');
- });
上面二代码JS代码分别执行,执行的结果是一样的。mouseover,onmouseover,mouseenter一样,mouseout,onmouseout,mouseleave一样
2,多个内部元素,mouseleave,mouseenter只会执行一次
- <div id="test2" >
- <ul>
- <li>test</li>
- <li>test1</li>
- <li>test2</li>
- <li>test3</li>
- <li>test4</li>
- </ul>
- </div>
如果将html代码换成ul这种形势,当鼠标进入,离开div时,mouseleave,mouseenter只会执行一次,而其他的,随着鼠标在ul的每个li之间进行滑动时,都会被执行。
jquery mouseout mouseover 多次执行的更多相关文章
- jQuery mouseover,mouseout事件多次执行的问题处理
控制鼠标移上移下事件,在使用Jquery 的mouseover,mouseout事件时,元素内部含有其它元素,会造成该事件多次的触发的情况. 问题解析 在用到mouseover和mouseout事件来 ...
- jQuery因mouseover,mouseout冒泡产生的闪烁问题
由于浏览器的冒泡行为.造成如果在一个DIV元素上同时定义了mouseover,mouseout的时候,当鼠标移动到DIV中的child子元素的时候,就会同时执行了两个操作mouseover和mouse ...
- jquery中mouseover和mouseenter的区别
jquery中mouseover和mouseenter的区别 一.总结 一句话总结: 见名知意:enter(进入)和over(在上方)的意思好好思考一下 mouseover就是从子元素回到自己的时候也 ...
- JQuery html API支持解析执行Javascript脚本功能实现-代码分析
JQuery html用法(功能类似innerHTML) 开发中需要使用Ajax技术来更新页面局部区域, 使用的方法是ajax获取html代码段(字符串),然后将这个html代码段作为参数,传入目标D ...
- jQuery使用伪递归重复执行动画
使用setInterval()来重复执行动画,会因为动画执行过程的时候,setInterval()的时间依然是在走的,所以会导致动画的调用时间不理想,因此只能使用递归来重复执行动画. // 首页LOG ...
- DOM函数和jQuery函数的覆盖与执行顺序
<script type="text/javascript"> window.onload = function () { alert(); } window.onlo ...
- jquery ajax 中各个事件执行顺序
jquery ajax 中各个事件执行顺序如下: 1.ajaxStart(全局事件) 2.beforeSend 3.ajaxSend(全局事件) 4.success 5.ajaxSuccess(全局事 ...
- jQuery中mouseover和mouseout冒泡产生闪烁问题
问题:在jQuery中,对元素绑定mouseover和mouseout事件时,每次移入移出该元素和子元素时,都会触发事件,从而会出现闪动的现象. 原因:浏览器的冒泡行为. 解决方案: 使用mousee ...
- jQuery事件--mouseover()、mouseout()、mouseenter()和mouseleave()
mouseover([[data],fn]) 概述 当鼠标指针位于元素上方时,会发生 mouseover 事件.该事件大多数时候会与 mouseout 事件一起使用 注释:与 mouseente ...
随机推荐
- 【网络】 应用&传输层笔记
应用层 应用层常用的协议和各自对应的TCP/UDP端口: DNS TCP/UDP 53 HTTP TCP 80 SMTP TCP 25 POP UDP 110 Telnet TCP 23 DHCP U ...
- js实现单双行文本溢出添加省略号
# 单双行文本溢出省略 ``` // 2. 当内容过多的时候,单行省略号: overflow: hidden; text-overflow:ellipsis; white-space: nowrap; ...
- Struct_2路径问题
今天在自学那个Struct2的知识点的时候,发现那个相对路径和绝对路径有点遗忘.特地去看了视频还有在百度上查了一些资料.我觉得这个路径问题对于我这个初学者来说还是有点容易遗忘的.所以,今天就添加这个新 ...
- Spring-MongoDB 关键类的源码分析
本文分析的是 spring-data-mongodb-1.9.2.RELEASE.jar 和 mongodb-driver-core-3.2.2.jar. 一.UML Class Diagram 核心 ...
- JavaWeb学习笔记八 监听器
监听器Listener jservlet规范包括三个技术点:servlet :listener :filter:监听器就是监听某个对象的的状态变化的组件.监听器的相关概念事件源: 被监听的对象(三个域 ...
- 使用IDEA配置Maven + SpringMVC + Mybatis 【一步一步踩坑详细配置完成】
PS:初学,想使用Maven配置一个SpringMVC的开发环境,照着网上的各种图文解说,配置了好久都没成功,有些写的不够详细,有些只有写一半,走了不少弯弯绕绕,踩了不少的坑,此文将正确配置成功的步骤 ...
- 201621123057 《Java程序设计》第14周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结与数据库相关内容. 2. 使用数据库技术改造你的系统 2.1 简述如何使用数据库技术改造你的系统.要建立什么表?截图你的表设计. 答 ...
- android 检查软件是否有更新版本
import java.net.HttpURLConnection; import java.net.URL; import java.util.HashMap; import com.yuxin.m ...
- ExecutorService实际上是一个线程池的管理工具
在Java5之后,并发线程这块发生了根本的变化,最重要的莫过于新的启动.调度.管理线程的一大堆API了.在Java5以后,通过Executor来启动线程比用 Thread的start()更好.在新特征 ...
- Linux 下的权限改变与目录配置
Linux 下的权限改变与目录配置 ./代表本目录的意思. (1):用户与用户组, 1:文件所有者,文件被某一用户所有 2:用户组: 对文件给与一个或者多个用户权限配置 3:其它人: (2):l ...