Parent-child relationship div move-in move-out display problem

Parent-child relationship div move-in move-out display problem

Delay the display of son and move out of hiding when box is requested

<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>

If this is the case, there's a question whether the div will disappear when the son is moved back into the box
So rewrite the code for the test

<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('Parent element moved in');
    }
    son.onmouseover=function(){
        clearTimeout(timmer);
        son.style.display="block";
        console.log('Child Element Move In');
    }
    son.onmouseout=function(){
        timmer = setTimeout(function () {
            son.style.display = "none";
        }, 300);
        console.log('Child Element Removal');
    }
    box.onmouseout=function(){
        timmer= setTimeout(function() {
            son.style.display = "none";
        }, 300);
        console.log('Parent element removal');
    }
</script>

find


The timmer timer that was last removed from the child element triggered the removal of the parent element, so two timers were generated, and cancelling a parent element move at a time is not possible.The key to discovering the problem is to add a line to the child element removal event to cancel bubbling because of the impact of event bubbling in 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('Parent element moved in');
    }
    son.onmouseover = function () {
        clearTimeout(timmer);
        son.style.display = "block";
        console.log('Child Element Move In');
    }
    son.onmouseout = function (e) {
        timmer = setTimeout(function () {
            son.style.display = "none";
        }, 300);
        console.log('Child Element Removal');
        var e = e || event; //Compatible ie
        e.stopPropagation(); //Cancel Bubble
    }
    box.onmouseout = function () {
        timmer = setTimeout(function () {
            son.style.display = "none";
        }, 300);
        console.log('Parent element removal');
    }

In this way, the above problems will not occur again.

Tags: IE

Posted on Wed, 06 May 2020 09:20:24 -0700 by killerofet