mouseleave 和 mouseout 区别
jQuery中的mouseleave和mouseout的区别
$("li").each(function(i) {
//删除的鼠标划过的显示与隐藏
$(this).mouseover(function() {
$(this).find(".del").fadeIn(10);
})
$(this).mouseleave(function() {
$(this).find(".del").fadeOut(10);
})
})
上面的代码中如果不是用的mouseleave而是mouseout的话你会发现尚未离开类名的.del这个DIV这个DIV有时候就会闪动。那是因为你可能离开了该DIV的子元素,所以会出发mouseout事件。具体mouseleave和mouseout两者之间的区别主要有以下两点:
1.不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件。
2.只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。
---恢复内容结束---
深度理解onmouseover事件和onmouseout事件
对于CSS的学习到此就告一段落了,其中自己感觉在CSS的学习中最有效的方法还是去进行大量的案例仿写,这样我们可以学习别的人是怎样布局的,不会不要紧,可以多去学习借鉴一下别人的经验啊。
这两天又接触了onmouseover事件和onmouseout事件,一直以为它们只是简单的分别实现鼠标指针移动到元素上时触发事件和在鼠标指针移出指定的对象时触发事件,但是突然发现这些只是对它们简单的描述,下面让我们一起看看它们终究还有神马奇怪的特性,是好还是坏呢?
首先实现一个盒子:
给这个盒子上绑定上onmouseover事件和onmouseout事件
发现它们不会发生什么问题,然后(嘿嘿,你懂得!)
让我们创建一个B元素,让它被嵌套在A元素中,作为A的子元素
我们依旧只给外层父元素A绑定onmouseover事件和onmouseout事件,你会发现发生什么了呢?对,没错!当鼠标移入移除A的子元素B的时候居然也发生了onmouseover事件和onmouseout事件!!Why?这不是我想要的!难道这时候B就不在是A的一部分了吗?当然不是,要不也不会在移入B元素时发生onmouseover事件。这样证明,B元素还是A不可分割的一部分啊。
那到底是怎么回事呢?终究还是事件冒泡搞得鬼?大家都知道常用的浏览器中有两种事件流:事件冒泡和事件捕获。让我们看一下事件冒泡的定义:事件按照从最特定的事件目标逐级向上传播到最不特定的事件目标(document对象)的顺序。所以说当鼠标移入移除A的子元素B的时候,B的onmouseover事件和onmouseout事件会触发,但是它自己没有这两个事件啊,就把这两个事件传递给了它的父元素A,A有这两个事件所以就发生了我们看到的情况。
有人会说那怎么避免呢,毕竟不是所有人都会是这种需求嘛,我们只要父级元素的事件触发就好,子级元素就让它静静的当个美男子就好了。
所以W3C在mouseover和mouseout事件中添加了relatedTarget属性 :
•在mouseover事件中,它表示鼠标来自哪个元素
•在mouseout事件中,它指向鼠标去往的那个元素
而而Microsoft在mouseover和mouseout事件中添加了两个属性
•fromElement,在mouseover事件中表示鼠标来自哪个元素
•toElement,在mouseout事件中指向鼠标去往的那个元素
所以我们就有了如下代码的实现
1 document.getElementById('box1').onmouseover = function (e) {2 if (!e) e = window.event;3 var reltg = e.relatedTarget ? e.relatedTarget : e.fromElement;4 while (reltg && reltg != this) reltg = reltg.parentNode;5 if (reltg != this) {6 // 这里可以编写 onmouseenter 事件的处理代码7 alert('111');8 }9 } 10 document.getElementById('box1').onmouseout = function (e) { 11 if (!e) e = window.event; 12 var reltg = e.relatedTarget ? e.relatedTarget : e.toElement; 13 while (reltg && reltg != this) reltg = reltg.parentNode; 14 if (reltg != this) { 15 // 这里可以编写 onmouseleave 事件的处理代码 16 alert('2222'); 17 } 18 }
转载于:https://www.cnblogs.com/agansj/p/5755180.html
mouseleave 和 mouseout 区别相关推荐
- mouseout 和mouseleave 使用的区别
对于mouseout 和mouseleave 使用的区别: 主要有以下两点: .不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件. 只有在鼠标指针离开被选元素时,才会触发 mo ...
- mouseout、mouseover和mouseleave、mouseenter区别
mouseenter:当鼠标移入某元素时触发. mouseleave:当鼠标移出某元素时触发. mouseover:当鼠标移入某元素时触发,移入和移出其子元素时也会触发. mouseout:当鼠标移出 ...
- mouseover和mouseout区别
mouseover和mouseout区别 lastChlid 最后一个子标签 previousSibling 标签的上一个节点 mouseover() 鼠标移入 和 mouseenter()鼠标移出 ...
- jQ中的mouseleave和mouseout的区别 模仿下拉框效果
1.不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件. 2.只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件. <div class="sel ...
- mouseleave与mouseout的区别
不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件. 只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件. 转载于:https://www.cnblogs.com ...
- jquery mouseleave和mouseout的区别
今天做一个下拉菜单的效果,发现用mouseout事件判断鼠标是否移出菜单让菜单消失的判断有很大问题. 第一是鼠标移动到了元素的margin border padding区域的时候会触发mouseout ...
- mouseleave 和 mouseout , mouseenter 和 mouseover,mouseover 和mousemove
(1)mouseenter 和 mouseleave t是一对事件,指的是鼠标进入和鼠标离开,但是这两个事件并没有事件冒泡 (2)mouseover 和 mouseout 是一对事件,指鼠标移入和离开 ...
- mouseover事件和mouseenter事件以及mouseleave事件和mouseout事件的区别
1.mouseover事件与mouseenter事件 mouseover事件:不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件. mouseenter事件:只有在鼠标指针穿过被选 ...
- mouseout和mouseleave的区别
mouseleave事件是各元素各自触发,不是由子元素冒泡而来,而mouseout是由子元素冒泡而来.也就是: mouseleave是当鼠标指针离开了目标元素以及目标元素的所有子元素以后才会触发.如下 ...
最新文章
- ppk on JavaScript第二章:背景(完结篇)
- python与excel的关系-Python 与 Excel 不得不说的事
- 零基础自学python教程-零基础人员可以学习python吗?|Python培训基础教程
- Pandas数据处理实战:福布斯全球上市企业排行榜数据整理
- 图片二:matplotlib、PIL、CV2操作图片
- Java Web项目的发布
- 使用js对来判断一个字符串中括号是否平衡匹配
- 那些在家啃书自学的人,最后都找到工作了吗?
- XPDF3.04抽取PDF中的中文文本
- python执行shellcode_python exec shellcode
- 市场营销读后感_好书共赏市场营销原理——带你探索市场营销成功的奥秘 !...
- python缓存memoryerror_Python安装会抛出大量MemoryError()的
- [记录] Ubuntu 配置Apache虚拟站点
- 【深度一键还原】我的台式机
- 代码规范化的七大原则
- 软件项目需求开发过程实践之软件需求说明书
- android输入法剪贴板,手机写作利器:输入法剪贴板
- 【物联网】阿里云iot物联网平台监控设备 在线离线状态 解决方案
- [题解]LuoGu4315:月下“毛景树”
- 一款压缩率达到五倍以上的免费gif压缩网站
热门文章
- 硅谷来信2,155,谁发明和缔造了facebook
- dcam matlab,matlab – 如何更改相机参数(自动曝光,快门速度,增益)?
- 通过lambda表达式根据对象中的时间排序
- EasyPoi读取word时报错java.util.zip.ZipException: Unexpected record signature: 0X9
- phtoshop python api for mac
- 小仙女化身女侠!Cocos官方的下一款DEMO曝光!
- Vue项目中实现父子组件之间传值
- 移动热点服务的属性此计算机,win10移动热点提示:我们无法设置移动热点怎么办_win10显示无法设置移动热点怎么办...
- LINUX中删除文件的命令是什么,linux 中删除 文件的命令是什么?
- 如何写好一篇计算机领域的科研论文