当移过元素的子元素时，mouseout的事件不触发

场景：
在一个元素上监听了一个mouseout的事件，但是当鼠标在这个元素的子元素上移动时，就会触发这个事件。但是我们希望是在这个元素内活动，都是算这个元素的，并不希望触发这个事件。

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

这里的关键是判断event.toElement 和event.relatedTarget的父元素或者更高级的元素是不是这个元素，如果不是了，再去实行这个函数。

问题描述