当悬停父绝对div的子元素而没有jQuery时，防止onmouseout

Question

我onmouseout在绝对位置div中的函数遇到麻烦。当鼠标点击div中的一个子元素时，将触发mouseout事件，但是我不希望它触发，直到鼠标不在父绝对div之外。我如何防止mouseout事件在没有jquery的情况下击中子元素而触发。我知道这与事件冒泡有关，但是我没有运气去寻找解决方法。我在这里找到了类似的帖子：如何禁用由子元素触发的mouseout事件？但是，该解决方案使用jQuery。

Answer 1

使用onmouseleave。

或者，在jQuery中，使用 mouseleave()

这正是您要寻找的东西。例：

<div class="outer" onmouseleave="yourFunction()">

    <div class="inner">

    </div>

</div>

或者，在jQuery中：

$(".outer").mouseleave(function(){

    //your code here

});

Answer 2

这是一个基于以下内容的更优雅的解决方案。它导致事件从多个级别的儿童中冒出来。它还解决了跨浏览器问题。

function onMouseOut(this, event) {

//this is the original element the event handler was assigned to

   var e = event.toElement || event.relatedTarget;

//check for all children levels (checking from bottom up)

while(e && e.parentNode && e.parentNode != window) {

    if (e.parentNode == this||  e == this) {

        if(e.preventDefault) e.preventDefault();

        return false;

    }

    e = e.parentNode;

}

//Do something u need here

}

document.getElementById('parent').addEventListener('mouseout',onMouseOut,true);