鼠标移出事件的案例以及详解-

一个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(&＃39;mouseout&＃39;,function(event){
              $(this).hide(1000);  
         });  
    });

好友列表

   
会飞的鱼
   
会飞的鱼
   
会飞的鱼
   
会飞的鱼

运行界面：

/鼠标离开好友框，隐藏/ (“#friends”).bind(‘mouseout’,function(event){               var tar=event.target || event.srcElement;//鼠标离开的元素               var totar=event.relatedTarget || event.toElement;//鼠标指向的元素               //如果鼠标指向了自己的子元素，则不触发mouseout事件              if(
(this).find(totar).size()>0||this==totar){ 
                return; 
            } 
            //否则，如果不是指向子元素，就表示鼠标已经离开了p 
            else  { 
                console.log(tar.id+’–’+totar.id); 
                $(this).hide(1000);  
            } 
         });

说明：
在发生mouseover和mouseout事件时，还会涉及更多的元素。这两个事件都会涉及把鼠标指针从一个元素的边界之内移到另一个元素边界之内。对mouseover事件而言，事件的主目标是获得光标的元素，而相关元素就是那个失去光标的元素。类似地，对mouseout事件而言，事件的主目标是失去光标的元素，而相关元素则是获得光标的元素。
DOM通过event对象的relatedTarget属性提供了相关元素的信息。这个属性只对于mouseover和mouseout事件才包含值；对于其他事件，这个属性的值是null。IE不支持realtedTarget属性，但提供了保存着同样信息的不同属性。在mouseover事件触发时，IE的fromElement属性中保存了相关元素；在mouseout事件出发时，IE的toElement属性中保存着相关元素。
以上代码为兼容不同浏览器的写法。如果觉得第一种方法麻烦，可以参照以下方法。

方法二：
思路：给p注册mouseleave事件，该事件和mouseout区别就在于，当鼠标移动到本元素内的子元素的时候不会触发mouseleave，只有真正离开了这个元素才能触发，而且不支持冒泡。

代码：

/鼠标离开好友框，隐藏/ (“#friends”).bind(‘mouseleave’,function(event){
(this).hide(1000);  
            } 
         );

代码一下子精简了好多。运行结果是一样的。

说明：
mouseover与mouseenter
不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。

只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。

mouseout与mouseleave

不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。

只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。
官方解释：
2.如果有子元素影响(含有子元素)，可以采用mouseenter和mouseleave，防止事件冒泡。

相信看了本文案例你已经掌握了方法，更多精彩请关注 第一PHP社区 其它相关文章！

推荐阅读：

如何使用css3实现3d立体特效

Javascript如何实现小球跳动效果

JS设计模式之原型模式详解

以上就是鼠标移出事件的案例以及详解的详细内容，更多请关注 第一PHP社区 其它相关文章！