鼠标移出事件的案例以及详解-木庄网络博客

本文摘自PHP中文网，作者php中世界最好的语言，侵删。

这次给大家带来鼠标移出事件的案例以及详解，使用鼠标移出事件的注意事项有哪些，下面就是实战案例，一起来看一下。

一个mouseout事件引发的问题
1. 遇到的问题
最近上课做一个效果，显示一个模拟QQ好友列表，默认是隐藏的，鼠标移动到浏览器右边界的时候显示，离开好友列表框的时候隐藏。

代码如下：

Insert title here
#friends{
        border:1px solid #ff0000;
        width:200px;
        height:400px;
        position:absolute;
        right:0px;
        top:20px;
        background: #abcdef;
        display:none
    }
    #line{
        width:1px;
        height:800px;
        float:right;
    }
   var inter;
    jQuery(function(){
        /*鼠标移动到右边界线，好友列表框显示*/         ("#line").mouseover(function(){             $("#friends").show(1000);         });        /*鼠标离开好友框，隐藏*/
("#friends").bind('mouseout',function(event){
              $(this).hide(1000);  
         });  
    });

好友列表

<p style="height:25px"><span>会飞的鱼</span><img style="width:18px;height:18px;"  src="images/boy.png"/></p>
<p style="height:25px"><span>会飞的鱼</span><img style="width:18px;height:18px;"  src="images/boy.png"/></p>
<p style="height:25px"><span>会飞的鱼</span><img style="width:18px;height:18px;"  src="images/boy.png"/></p>
<p style="height:25px"><span>会飞的鱼</span><img style="width:18px;height:18px;"  src="images/boy.png"/></p>

1	`<p id="line"></p>`

运行界面：
这里写图片描述
上面的mouseout事件出了问题，鼠标移动到右边界显示好友框没问题，当移动到好友昵称上面时候好友框消失了，这是为何？
原因是好友框内有好多子元素p，每个p对应一个好友。此时鼠标移动到子元素上面触发了父元素的mouseout事件。更为糟糕的是子元素p里面还有span，image子元素，这样就会触发子元素p的mouseout，继而冒泡到最外层的好友列表的p。
2. 如何解决
方法一：
思路：判断当前鼠标指向的元素是否是其子元素，如果是子元素就不隐藏，直接return，否则，隐藏好友列表。