Question

我有这段代码：

<div id='father' style='width:50px; height:50px;overflow:hidden;' onMouseOut="alert('called');">
    <div id='container' style='margin-top:0px;width:100%;height:100%;transition: margin 2s;'>
        <div style='width: 50px;height:50px;background-color:rgb(255,0,0);' onClick="document.getElementById('container').style.marginTop='-50px'"></div>
        <div style='width: 50px;height:50px;background-color:rgb(0,0,255);' onClick="document.getElementById('container').style.marginTop='0px'"></div>
    </div>
</div>

如果你点击红色框，蓝色框将从底部出现...当onMouseOver调用蓝色框时，来自父亲的onMouseOut也被调用...

如果鼠标仍然在“父亲”里面，你知道一个解决方法是看不到警报。

Answer 1

这是一个更新的小提琴，其中包含一个工作示例：http://jsfiddle.net/SXj2W/2/

当onmouseout被解雇时，你必须检查事件的相关目标是否是你父DIV的子元素。您可以使用以下代码执行此操作。

添加一个函数，在mouseout上调用您的页面<HEAD>

function onMouseOut(self,event) {    
   var e = event.toElement || event.relatedTarget;
    while(e && e.parentNode && e.parentNode != window) {
        if (e.parentNode == self||  e == self) {
            if(e.preventDefault) e.preventDefault();
            return false;
        }
        e = e.parentNode;
    }
    alert('Mouseout on father');
}

然后将您的父div更新为：

<div id='father' style='width:50px; height:50px;overflow:hidden;' onmouseout="onMouseOut(this,event)">

父亲的onMouseOut在孩子的onMouseOver时调用

1 个答案: