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 }

mouseleave 和 mouseout 区别的更多相关文章

  1. mouseout、mouseover和mouseleave、mouseenter区别

    今天在使用鼠标事件时,用错了mouseout,于是做个测试总结. 结论: mouseenter:当鼠标移入某元素时触发. mouseleave:当鼠标移出某元素时触发. mouseover:当鼠标移入 ...

  2. jQuery中mouseleave和mouseout的区别详解

    很多人在使用jQuery实现鼠标悬停效果时,一般都会用到mouseover和mouseout这对事件.而在实现过程中,可能会出现一些不理想的状况. 先看下使用mouseout的效果: <p> ...

  3. jquery中mouseout和mouseleave 事件的区别

    今天用jQuery写了一个选项卡的效果,用mouseout事件控制了鼠标的移出,结果发现在移出时div会发生闪动,于是网上各种查资料觉得用mouseleave更合适一些,

  4. mouseleave和mouseout的区别

    http://www.w3school.com.cn/tiy/t.asp?f=jquery_event_mouseleave_mouseout

  5. mouseleave 与 mouseout 的不同

    Q:给某div添加mouseout事件后,在空白区域移动到其子元素(如按钮)上(此时并没有离开此div)时,会触发mouseout事件,而mouseleave则不会 A:与 mouseout 事件不同 ...

  6. 最终解决 mouseenter, mouseleave , mouseout mousehover mousemove等事件的区别?

    在jquery中, html页面的div的显示和隐藏, 修改等的功能, 最终都要由 事件 触发来引用, 不管是键盘事件, 还是鼠标事件... mouseenter和mouseleave是成对对应的, ...

  7. mouseenter(fn)和mouseleave、mouseover和mouseout的的区别

    $('.box1').mouseenter(function(){//穿入事件mouseenter $(this).css('background','red'); }).mouseleave(fun ...

  8. mouseout与mouseleave的区别

    1 mouseout:当鼠标指针从元素上移开时,发生 mouseout 事件.该事件大多数时候会与 mouseover 事件一起使用. 2 mouseout与 mouseleave 事件不同,不论鼠标 ...

  9. jquery mouseout mouseover 多次执行

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

随机推荐

  1. PALIN - The Next Palindrome 对称的数

    A positive integer is called a palindrome if its representation in the decimal system is the same wh ...

  2. CSS特殊性值

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. php开发总结

    ./configure --prefix=/usr/local/php --with-apxs2=/usr/local/apache2/bin/apxs --with-mysql=shared,mys ...

  4. 图片标签的alt与title区别

    一.img标签alt属性 1.alt属性是考虑到不支持图像显示或者图像显示被关闭的浏览器的用户,以及视觉障碍的用户和使用屏幕阅读器的用户.当图片不显示的时候,图片的替换文字. 2.alt属性值得长度必 ...

  5. 11--Python 备份文件程序

    最近看了下<A Byte of Python>, 看见一个非常有意思的程序,用python进行文件行备份的练习程序, 自己在机器上敲代码运行了一遍,结果出现了一个小问题,路径出错--&qu ...

  6. Maven项目搭建(二):Maven搭建SSM框架

    上一章给大家讲解了如何使用Maven搭建web项目. 这次给大家介绍一下怎么使用Maven搭建SSM框架项目. 首先我们来看一下pom.xml的属性介绍: project: pom的xml根元素. p ...

  7. CodeForces - 468A

    Little X used to play a card game called "24 Game", but recently he has found it too easy. ...

  8. Cisco 12系列 AP 初始化配置-2-初始化配置

    用于SSH登陆这个设备 bridge irb bridge 1 route ip  开启路由功能 interface BVI1 ip address 10.15.106.44 255.255.255. ...

  9. Docker镜像Push到DockerHub

    1.自己整理的容器首先通过commit做成本地镜像 docker commit -a "Cristin" -m "测试开发平台Jenkins" 281eef85 ...

  10. I/O会一直占用CPU吗?【转载】

    转自:https://www.zhihu.com/question/27734728 知乎上看到的一个提问,可以参考 如下图:(图片摘自网络) 在进行I/O操作的时候,是将任务交给DMA来处理,请求发 ...