啥？鼠标移出去也有讲究？可能你觉得这事儿太小了，可在网页设计里头，它可是大有用处！别急，咱们今天就唠唠这个看似简单却又不简单的话题。那就让我给你说说前几天我做的一个课堂试验，也许这样你就能更明白怎么用好这个功能~
一、案例背景：好友列表的小插曲
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);
});
});
会飞的鱼
会飞的鱼
会飞的鱼
会飞的鱼
我最近上课想搞个QQ好友列表的模拟效果，开始都挺顺利，但后面发现，我光标放到好友名字上面时，好友列表就不见了，咋会这样呢?
朋友列表框里头儿那些小东西有毛病。它们一个个对应着单个的朋友，然后我一点它们，就把爸爸（指父元素）的鼠标离开事件给搞出来了。更糟糕的是，这些小东西里面还有别的东西，像span啊image什么的，结果就是事件一直在发生，最后弄得整个列表都看不清了。
二、深入解析：事件触发的机制
搞定这个问题得先明白鼠标移出事件咋回事。当鼠标经过目标元素(主目标)时会触发mouseover事件，这时候被忽略的元素就是相关元素。换句话说，如果你鼠标从主目标上挪开，就会触发mouseout事件，这时候主目标就是相关元素。那你知道吗？IE浏览器里有两个特别的属性，就是fromElement和toElement。它们会在不同的事件触发时记录相关元素！
三、解决方案：选择合适的事件类型
对于那些难搞的子元素结构，光用mouseover和mouseout可不行。这时候，咱们试试看mouseenter和mouseleave。它们俩不一样！比如，当鼠标真真实实点进了被选中的元素里，只有这时mouseenter才会响应；如果鼠标从这个元素上移开，那就只有mouseleave会有反应，跟子元素没关系。
四、跨浏览器兼容性：jQuery的救场
/鼠标离开好友框，隐藏/ (“#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);
}
});
虽然IE浏览器支持鼠标移动进入和离开事件，但是像Chrome和Safari这样的浏览器却不太给力。不过别怕，用上jQuery这个强大工具去注册这两个事件，就能解决跨浏览器兼容性的问题！因为jQuery会把这些事件包装好，让它们在各种浏览器上都能正常运行。
五、实战技巧：根据场景选择事件
其实，用哪种事件还是得看具体情况。比如你选的那个东西里头啥都没的话，用鼠标滑过去滑出来就行了。但是万一有子元素，特别是嵌套好几层的那种，那就别动鼠标进入或离开这种方法比较保险，能避免事件乱跑。
六、注意事项：避免常见的陷阱
用鼠标移开这个事情，那可不简单！有几个陷阱得小心。比如，事件会像气泡一样冒出来，乱点一通，特别是在一大堆DOM结构里面。而且，每个浏览器对这事的理解不一样，所以做这个功能时就得多试几次，看看到底哪个浏览器支持得最好。
/鼠标离开好友框，隐藏/ (“#friends”).bind(‘mouseleave’,function(event){
(this).hide(1000);
}
);
七、总结：鼠标移出事件的深层应用
看了今天的分享，相信你已经对鼠标移出网页时发生的事情有更深了解！不管是简单地展示隐藏内容，还是玩转各种交互设计，只要懂得怎么用好这些事件，就能让你做出来的网页操作起来顺滑又好用。
最后我想问下你，你做网页设计时，怎么处理鼠标离开页面的事情？赶紧来评论区说说你的心得，咱们一起学，一起进步！别忘了给我点个赞，分享出去！
评论0