解决onmouseover和onmouseout在内部触发父元素相应事件问题

mouse事件 prototype dom

场景描述：开发中经常遇到，鼠标 移入/移出 某块元素触发相应事件。假如该元素包含很多相关子元素。当鼠标移入相关子元素时，会触发父元素的鼠标移出事件，当鼠标从子元素直接不经过父元素（子元素在父元素边界）移出时，并不会触发父元素的移出事件。
这个问题一直都有遇到过，之前的做法，既笨拙又复杂：就是父元素的移出事件做成定时任务。当移入子元素时就取消还未完成的定时任务。这样做耗性能且不能够做到及时。现在已经用一个更妥帖的方法来处理类似问题。

大致思想：
1、当父元素触发onmouseout事件时判断此时的event.toElement元素是否是父元素的子节点
2、在节点元素原型上定义一个判断元素是否是调用元素的子元素方法。(也可以将其定义成一个公用方法)

//方式一：在节点元素原型上定义。调用  parentDom.containEle(dom)
HTMLElement.prototype.containEle = function(dom){
    while(dom && (typeof dom)){
        if(dom == this) return true;
        dom = dom.parentNode;
    }
}
//方式二：定义成公用方法。调用  containEle(parentDom,dom)
function containEle(parentDom,dom){
    while(dom && parentDom){
        if(dom == parentDom) return true;
        dom = dom.parentNode;
    }
}

实际应用

<div class='parent'>
    <div class='son'></div>
</div>
<script>
    let parent = document.querySelector('.parent');
    let son = document.querySelector('.son');
    parent.onmouseover = function(){
        //....
    };
    parent.onmouseout = function(event){
        let toEle = event.toElement;
        if(!parent.containEle(toEle)){
            //鼠标已经离开父元素所在区域，定义相关操作
        }
        else{
            //鼠标只是进入子元素所在区域，并未离开父元素所在区域。（通常情况下不作处理）
        }
    }
    son.onmouseout = function(event){
        let toEle = event.toElement;
        if(!parent.containEle(toEle)){
            //鼠标已经离开父元素所在区域，定义相关操作
        }
    }
</script>