父子关系div移入移出 显示问题

父子关系div 移入移出 显示问题

要求移入box时，延迟显示 son，移出隐藏

<div id="box">
    <div id="son"></div>
</div>

<script>
var box = document.getElementById('box');
var big = document.getElementById('son');
var timmer;
box.onmouseover = big.onmouseover =function(){
    clearTimeout(timmer);
    big.style.display="block";
}
box.onmouseout= big.onmouseout =function(){
    timmer =setTimeout(function(){
    big.style.display="none";
    },300)
}
</script>

如果是这样的代码，会有一个问题，从 son 重新移入到 box时 子div还是会消失
所以重新写了测试的代码

<div id="box">
    <div id="son"></div>
</div>
<script>
    var box=document.getElementById('box');
    var son=document.getElementById('son');
    var timmer=null;
    box.onmouseover= function(){
        clearTimeout(timmer);
        son.style.display="block";
        console.log('父元素 移入');
    }
    son.onmouseover=function(){
        clearTimeout(timmer);
        son.style.display="block";
        console.log('子元素 移入');
    }
    son.onmouseout=function(){
        timmer = setTimeout(function () {
            son.style.display = "none";
        }, 300);
        console.log('子元素 移除');
    }
    box.onmouseout=function(){
        timmer= setTimeout(function() {
            son.style.display = "none";
        }, 300);
        console.log('父元素 移除');
    }
</script>

发现

最后从子元素移除，同时触发了父元素移除的 timmer定时器，所以产生了两个定时器，一次父元素移入的取消并不能行。发现问题的关键了，因为JS中的事件冒泡影响，所以在子元素移除事件中加一行取消冒泡即可

<div id="box">
    <div id="son"></div>
</div>
<script>
    var box = document.getElementById('box');
    var son = document.getElementById('son');
    var timmer = null;
    box.onmouseover = function () {
        clearTimeout(timmer);
        son.style.display = "block";
        console.log('父元素 移入');
    }
    son.onmouseover = function () {
        clearTimeout(timmer);
        son.style.display = "block";
        console.log('子元素 移入');
    }
    son.onmouseout = function (e) {
        timmer = setTimeout(function () {
            son.style.display = "none";
        }, 300);
        console.log('子元素 移除');
        var e = e || event; //兼容ie
        e.stopPropagation(); //取消冒泡
    }
    box.onmouseout = function () {
        timmer = setTimeout(function () {
            son.style.display = "none";
        }, 300);
        console.log('父元素 移除');
    }

这样就不会再出现上述问题了。