原生JavaScript实现mouseenter

mouseenter和Mouseleave都是jquery的事件，JavaScript的mouseover和mouseout每个子元素都会触发，从子元素移到父元素也会触发，用起来不很方便，而且触发的太多次不必要。

Event.relatedTarget是移动到或从哪里移动来的那个元素，可以判断这个relatedTarget如果既不是currentTarget也不是currentTarget的子元素，就可以判断当前鼠标是从外面移进来或移动到外面去。

// 鼠标悬浮显示控件,类似mouseenter
                var show_controls=function(e){
                    if(e.relatedTarget!==e.currentTarget && e.currentTarget.getElementsByClassName(e.relatedTarget.className).length===0){
                        controls.style.opacity=1;
                        clearTimeout(timeout);
                    }
                    
                    
                };
                var hide_controls=function(e){
                        // console.log(this);
                    if(e.relatedTarget!==e.currentTarget && e.currentTarget.getElementsByClassName(e.relatedTarget.className).length===0){
                        timeout=setTimeout(hide,500);
                    }
                    function hide(){
                        // console.log("timeout",this);
                        controls.style.opacity=0;
                    }

                
                }

不知道怎么判断是不是子元素，我的一块里子元素的类名并不重复，就用了类名查找，结果长度大于0就是子元素。。。。好麻烦好别扭的样子。。回头研究研究。