jquery mouseleave事件:移动到子容器select的option上也会触发

当使用jquery给父容器绑定了mouseleave事件时,只有离开了父容器对象才会触发mouseleave事件,移动到子对象容器是不会触发的。

如果父容器中包含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="/go/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>

怎么解决移动到option隐藏的问题。

1个回答

当移动到select的option时,通过获取鼠标移动到的事件对象发现,IE下toElement为null,firefox下为undefined,得不到option对象。由此我们可以通过判断移动到的对象是否为真来判断移动到的是否为option对象解决这个问题。

    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();
                });
            });
        });
    }
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!