父子关系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('父元素 移除');    }

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