JSFiddle - React, Tailwind, and code Playground

by amasad

HTML

<div id="parent">parent
    <div id="child">child <div id="child2">child2</div></div>
</div>

CSS

#parent{
    position:absolute;
    top:50px;
    left:10px;
    width:90px;
    height:90px;
    background-color:red;
}
#child
{
    position:absolute;
    bottom:0px;
    width:60px;
    height:60px;
    background-color:cyan;
}

#child2{
background-color:yellow;
}

JavaScript

function makeMouseOutFn(elem){
    var list = traverseChildren(elem);
    return function onMouseOut(event) {
        var e = event.toElement || event.relatedTarget;
        if (!!~list.indexOf(e)) {
            return;
        }
        alert('MouseOut');
        // handle mouse event here!
};
}

//using closure to cache all child elements
    var parent = document.getElementById("parent");
    parent.addEventListener('mouseout',makeMouseOutFn(parent),true);
                                                               
        
                                                           
//quick and dirty BFS children traversal, Im sure you could find a better one                                        
function traverseChildren(elem){
    var children = [];
    var q = [];
    q.push(elem);
    while (q.length>0)
    {
        var elem = q.pop();
        children.push(elem);
        pushAll(elem.children);
    }
        function pushAll(elemArray){
            for(var i=0;i<elemArray.length;i++)
            {
                q.push(elemArray[i]);
            }
            
        }
        return children;
}