移动到子容器上触发父容器mouseout事件解决办法

  容器下包含a,select标签,鼠标移动到子容器下都会触发mouseout事件,文本内容,如这里列出来的则不会触发mouseout事件。

<div style="width:300px;height:200px;border:solid 1px black" onmouseout="alert('MOUSEOUT')">
容器下包含a,select标签,鼠标移动到子容器下都会触发mouseout事件,文本内容,如这里列出来文字的则不会触发mouseout事件。<br />解决办法就是判断移动到的对象是否包含在父容器中,包含则不执行mouseout的代码块。
<select><option>1</option><option>2</option></select>
<a href="#">Test</a>
<div style="border:solid 1px #eee">abc</div>
</div>

  解决办法就是判断移动到的对象是否包含在父容器中,包含则不执行mouseout的代码块。

<script>
    function isInner(e,p) {
        var o = e.relatedTarget || e.toElement; //标准浏览器移动到的对象为事件的relatedTarget对象,IE为toElement
        if (!o) return true;//移动到option上为undefined,直接return true
        if (o == p || (p.contains && p.contains(o))) return true;//为容器本身,调用判断DOM对象是否有contains方法(部分低版本浏览器可能不包含这个方法),有调用contains判断是否包含移动到的这个容器
        while (o = o.parentNode) if (o == p) return true;//标准浏览器没有contains方法,遍历父节点实现
        return false;
    }
</script>
<div style="width:300px;height:200px;border:solid 1px black" onmouseout="if(!isInner(event,this))alert('MOUSEOUT')">
解决办法就是判断移动到的对象是否包含在父容器中,包含则不执行mouseout的代码块。
<select><option>1</option><option>2</option></select>
<a href="#">Test</a>
<div style="border:solid 1px #eee">abc</div>
</div>

 

加支付宝好友偷能量挖...


原创文章,转载请注明出处:移动到子容器上触发父容器mouseout事件解决办法

评论(0)Web开发网
阅读(496)喜欢(0)JavaScript/Ajax开发技巧