function onMouseOut(event) { //this is the original element the event handler was assigned to var e = event.toElement || event.relatedTarget; if (e.parentNode == this || e == this) { return; } alert('MouseOut'); // handle mouse event here! } document.getElementById('parent').addEventListener('mouseout',onMouseOut,true);我制作了一个快速的JsFiddle演示,其中包含所有需要的CSS和HTML,请查看…
注意 ,这仅检查直接父级,如果父级div嵌套了子级,则您必须以某种方式遍历父级元素以寻找“原始元素”
*嵌套孩子的 *编辑 示例
编辑 固定为希望跨浏览器
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 elementsvar parent = document.getElementById("parent");parent.addEventListener('mouseout',makeMouseOutFn(parent),true);//quick and dirty DFS children traversal, 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;}


