鼠标移出事件的案例以及详解-
一个mou搜索引擎优化ut事件激发的题目
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").mou搜索引擎优化ver(function(){ $("#friends").show(1000); }); /*鼠标脱离摰友框，隐蔽*/
("#friends").bind('mou搜索引擎优化ut',function(event){
$(this).hide(1000);
});
});摰友列表
会飞的鱼
会飞的鱼
会飞的鱼
会飞的鱼
运转界面：
/鼠标脱离摰友框，隐蔽/ (“#friends”).bind(‘mou搜索引擎优化ut’,function(event){ var tar=event.target || event.srcElement;//鼠标脱离的元素 var totar=event.relatedTarget || event.toElement;//鼠标指向的元素 //要是鼠标指向了本人的子元素，则不触发mou搜索引擎优化ut事件 if(
(this).find(totar).size()>0||this==totar){
return;
}
//不然，要是不是指向子元素，就表示鼠标已经脱离了p
else {
console.log(tar.id+’–’+totar.id);
$(this).hide(1000);
}
});注明：
在产生mou搜索引擎优化ver和mou搜索引擎优化ut事件时，还会波及更多的元素。这两个事件都会波及把鼠标指针从一个元素的边界以内移到另一个元素边界以内。对mou搜索引擎优化ver事件而言，事件的主指标是获得光标的元素，而相干元素就是阿谁失去光标的元素。相似地，对mou搜索引擎优化ut事件而言，事件的主指标是失去光标的元素，而相干元素则是获得光标的元素。
DOM通过event对象的relatedTarget属性供给了相干元素的信息。这个属性只关于mou搜索引擎优化ver和mou搜索引擎优化ut事件才包括值；关于其他事件，这个属性的值是null。IE不支撑realtedTarget属性，但供给了保留着一样信息的不一样属性。在mou搜索引擎优化ver事件触发时，IE的fromElement属性中保留了相干元素；在mou搜索引擎优化ut事件动身时，IE的toElement属性中保留着相干元素。
以上代码为兼容不一样阅读器的写法。要是觉得首先种办法费事，可以参照下列办法。
办法二：
思绪：给p注册mouseleave事件，该事件和mou搜索引擎优化ut区别就在于，当鼠标挪移到本元素内的子元素的时候不会触发mouseleave，只要真正脱离了这个元素才干触发，并且不支撑冒泡。
代码：
/鼠标脱离摰友框，隐蔽/ (“#friends”).bind(‘mouseleave’,function(event){
(this).hide(1000);
}
);代码一下子精简了好多。运转效果是同样的。
注明：
mou搜索引擎优化ver与mouseenter
岂论鼠标指针穿过被选元素或其子元素，都会触发 mou搜索引擎优化ver 事件。
只要在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。
mou搜索引擎优化ut与mouseleave
岂论鼠标指针脱离被选元素还是任何子元素，都会触发 mou搜索引擎优化ut 事件。
只要在鼠标指针脱离被选元素时，才会触发 mouseleave 事件。
官方解释：
2.要是有子元素影响(含有子元素)，可以采纳mouseenter和mouseleave，防止事件冒泡。
信赖看了本案牍例你已经把握了办法，更多出色请关注 百分百源码网 其它相干文章！
举荐浏览：
怎样运用css3实现3d立体特效
javascript怎样实现小球跳动结果
JS设计模式之原型模式详解
以上就是鼠标移出事件的案例以及详解的细致内容，更多请关注 百分百源码网 其它相干文章！
