mouseover,mouseout,mouseenter,mouseleave的区别
相信做前端开发的都听说过“冒泡型事件”吧,《JavaScript高级程序设计》第九章有详细的讲述,但是,在学习的时候一知半解,也没详细去理解,导致最近在工作中碰到了问题:有许多 li 标签,标签上有2个按钮,当且仅当鼠标移入 li 时才会显示上面的2个按钮,如下图,左边是默认状态,右边是鼠标移入状态,开始使用的是 mouseover 和 mouseout ,结果鼠标移动到按钮上时,按钮会出现闪烁的情况。
后来对比了mouseover,mouseout,mouseenter,mouseleave的区别发现,mouseover 和 mouseout 在鼠标移入移出时会触发其父级元素的 mouseover,mouseout 方法,而 mouseenter,mouseleave 只会触发当前鼠标移入和移出元素的方法。换句话说,后两者是不冒泡的事件,前两者是会冒泡的事件。
下面是实验详细:
<div id="mouseEventTest">
<span id="parent">aaaaaaaaaaaaaaa<span id="child">bbbbbbbbbb</span></span>
</div>
页面如下:
简单的css代码:
span{
padding: 10px;
width: auto;
line-height: 30px;
}
parent 和 child 的 mouseover,mouseout,mouseenter,mouseleave 方法如下:
function parentMouseOver(e) {
console.log('parentMouseOver');
}
function parentMouseOut(e) {
console.log('parentMouseOut');
}
function childMouseOver(e) {
console.log('childMouseOver');
}
function childMouseOut(e) {
console.log('childMouseOut');
}
function parentMouseEnter(e) {
console.log('parentMouseEnter');
}
function parentMouseLeave(e) {
console.log('parentMouseLeave');
}
function childMouseEnter(e) {
console.log('childMouseEnter');
}
function childMouseLeave(e) {
console.log('childMouseLeave');
}
分别设置两组绑定:
1)mouseover,mouseout
$("#parent").bind('mouseover',parentMouseOver);
$("#parent").bind('mouseout',parentMouseOut);
$("#child").bind('mouseover',childMouseOver);
$("#child").bind('mouseout',childMouseOut);
2)mouseenter,mouseleave
$("#parent").bind('mouseenter', parentMouseEnter);
$("#parent").bind('mouseleave', parentMouseLeave);
$("#child").bind('mouseenter', childMouseEnter);
$("#child").bind('mouseleave', childMouseLeave);
操作方式是:鼠标从 parent 左边移入,然后从右边移出。
绑定的结果如下:
1)组(四个红框分别是:进入 parent ,从 parent 到 child ,从 child 到 parent ,移出 parent):
2)组:
实验结果可以清晰地看出 mouseover,mouseout,mouseenter,mouseleave 的区别。
mouseover,mouseout,mouseenter,mouseleave的区别的更多相关文章
- jquery的hover mouseover mouseout mouseenter mouseleave的区别
jquery的hover mouseover mouseout mouseenter mouseleave的区别 1.mouseover mouseout mouseover - 鼠标指针经过任何子元 ...
- mouseover,mouseout,mouseenter,mouseleave的区别
1.前言 今天下午参加一个面试,对方问我写不写博客,这时候才猛然意识到好久没写东西了.最近一直在外边实习,每天有很多经历和挑战,但是却没有及时地记录下来,这一点必须得批评自己,以后得经常把自己遇到的问 ...
- 关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
轮播中大多会选择mouseover和mouseout 这个时候是没有任何问题的 但当遇到有css3动画的时候,会发现移入移出过快 动画还没加载完成就需要执行下一个动画,完了动画样式就错乱了. 这时候 ...
- 你可能不知道的mouseover/mouseout mouseenter/mouseleave
mouseover与mouseenter 1. 触发时机 mouseover在被监听的节点与子节点上都会触发 mouseenter只在被监听的节点上触发 本质上是因为mouseenter不能冒泡 2. ...
- 理解mouseover,mouseout,mouseenter,mouseleave
mouseover定义和用法 当鼠标指针位于元素上方时,会发生 mouseover 事件. 该事件大多数时候会与 mouseout 事件一起使用. mouseover() 方法触发 mouseover ...
- mouseover,mouseout和mouseenter,mouseleave的区别及适用情况
在做类似于百度地图右下角,不同地图切换UI时,遇到了问题. 就是鼠标滑过的时候出现一个层,当鼠标滑到当前层的话mouseover和mouseout在低版本的浏览器会出现闪动的现象,最简单的那就是把mo ...
- mouseover和mouseenter,mouseout和mouseleave的区别-引发的探索
相信小伙伴们都用过鼠标事件,比如mouseover和mouseout,mouseenter和mouseleave.它们都分别表示鼠标移入移出. 在使用的过程中,其实一直有个小疑问——它们之间究竟有什么 ...
- jQuery mouseover与mouseenter,mouseout与mouseleave的区别
mouseover与mouseenter 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件. 只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件. mouseou ...
- mouseover与mouseenter,mouseout与mouseleave的区别
mouseover与mouseenter 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件.只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件. mouseout ...
- 曾经跳过的坑----jQuery mouseover与mouseenter,mouseout与mouseleave的区别
mouseover与mouseenter 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件. 只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件. mouseou ...
随机推荐
- linux php开启openssl
1.测试openssl是否安装查看版本 openssl version查看路径 which openssl2.因为要扩展php扩展模块,所以要通过phpize可以建立php的外挂模块find / ...
- hdu 5569 matrix dp
matrix Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=5569 D ...
- iOS开发——面试总结(一)
面试总结(一) 通过网络搜寻和自己总结经历找了一些IOS面试经常被问道的问题: 1.搞清楚touch事件的传递(事件的响应链) 事件的响应(responder chain) 只有继承了UIRespon ...
- SQL Server中内连接和外连接的区别
SQL Server中内连接和外连接的区别 假设一个数据库中有两张表,一张是学生表StudentInfo,一张是班级表ClassInfo,两张表之间用ClassId字段进行关联. 如果用内连接,正常的 ...
- C语言中堆和栈的区别
原文:http://blog.csdn.net/tigerjibo/article/details/7423728 C语言中堆和栈的区别 一.前言: C语言程序经过编译连接后形成编译.连接后形成的二进 ...
- if条件
-e filename 如果 filename存在,则为真-d filename 如果 filename为目录,则为真 -f filename 如果 filename为常规文件,则为真-L filen ...
- Quartus II 12.0 下载、安装和破解
转载:http://www.cnblogs.com/imapla/archive/2012/09/10/2678814.html 20130417 Quartus II 12.0 不支持波形仿真,推荐 ...
- Asp.Net 之 服务器端控件与客户端控件的区别
服务器控件,即Asp.Net的控件,控制这些控件必须经过服务器处理,然后响应用户,代码在服务器端解释执行,生成根据用户的浏览器而定的html元素. 客户端控件,即普通Html控件,使用script控制 ...
- UVA442 Matrix Chain Multiplication 矩阵运算量计算(栈的简单应用)
栈的练习,如此水题竟然做了两个小时... 题意:给出矩阵大小和矩阵的运算顺序,判断能否相乘并求运算量. 我的算法很简单:比如(((((DE)F)G)H)I),遇到 (就cnt累计加一,字母入栈,遇到) ...
- 给jdk写注释系列之jdk1.6容器(12)-PriorityQueue源码解析
PriorityQueue是一种什么样的容器呢?看过前面的几个jdk容器分析的话,看到Queue这个单词你一定会,哦~这是一种队列.是的,PriorityQueue是一种队列,但是它又是一种什么样的队 ...