jquery mouseleave事件：移动到子容器select的option上也会触发
当使用jquery给父容器绑定了mouseleave事件时，只有离开了父容器对象才会触发mouseleave事件，移动到子对象容器是不会触发的【注意不要使用mouseout事件，要不即使移动到的是父容器的子对象，如a也会触发mouseout事件。】
但是今天碰到了一个特例，如果父容器中包含select对象，当展开select对象的option时，鼠标移动到option选项上，父容器自动隐藏了，触发了mouseleave事件。测试代码如下
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jquery mouseleave事件：移动到子容器select的option上也会触发</title>
<style type="text/css">
*{ padding:0; margin:0;}
#one{ float:left; width:250px; height:25px; }
#two{ float:left; width:258px; height:264px; display:none; left:0; top:50px;position:absolute; border-left:none; background:#CCCCCC;}
#one_two{ width:250px; height:25px; background:#CCCCCC;}
#one_three{ width:250px; height:25px; background:#999;}
</style>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript">
window.onload = function () {
$("#one_three").hover(function () {
$("#two").show(function () {
$(this).mouseleave(function (e) {
$(this).hide();
});
});
});
}
</script>
</head>
<body>
<div id="big">
<div id="one" >
<div id="one_three">鼠标移动到此对象上显示浮动层</div>
<div id="one_two"></div>
</div>
<div id="two">
<ul>
<li><a href="#">sdfsdfs</a></li>
<li><a href="#">sdfsdfs</a></li>
<li><a href="#">sdfsdfs</a></li>
</ul>
<select>
<option>WWWWWWWWWW</option>
<option>WWWWWWWWWW</option>
<option>WWWWWWWWWW</option>
<option>WWWWWWWWWW</option>
</select>
</div>
</div>
</body>
</html>
当移动到select的option时，通过获取鼠标移动到的事件对象发现，IE下toElement为null，firefox下为undefined，得不到option对象。由此我们可以通过判断移动到的对象是否为真来判断移动到的是否为option对象解决这个问题。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jquery mouseleave事件：移动到子容器select的option上也会触发</title>
<style type="text/css">
*{ padding:0; margin:0;}
#one{ float:left; width:250px; height:25px; }
#two{ float:left; width:258px; height:264px; display:none; left:0; top:50px;position:absolute; border-left:none; background:#CCCCCC;}
#one_two{ width:250px; height:25px; background:#CCCCCC;}
#one_three{ width:250px; height:25px; background:#999;}
</style>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript">
window.onload = function () {
$("#one_three").hover(function () {
$("#two").show(function () {
$(this).mouseleave(function (e) {
var o = e.relatedTarget || e.toElement;
if (!o) return; //增加移动到的对象判断，为option时退出
$(this).hide();
});
});
});
}
</script>
</head>
<body>
<div id="big">
<div id="one" >
<div id="one_three">鼠标移动到此对象上显示浮动层</div>
<div id="one_two"></div>
</div>
<div id="two">
<ul>
<li><a href="#">sdfsdfs</a></li>
<li><a href="#">sdfsdfs</a></li>
<li><a href="#">sdfsdfs</a></li>
</ul>
<select>
<option>WWWWWWWWWW</option>
<option>WWWWWWWWWW</option>
<option>WWWWWWWWWW</option>
<option>WWWWWWWWWW</option>
</select>
</div>
</div>
</body>
</html>
至于为上面移动到子对象select的option上也会触发mouseleave事件，不知道什么原因...(⊙_⊙)
加支付宝好友偷能量挖...
原创文章，转载请注明出处：jquery mouseleave事件：移动到子容器select的option上也会触发