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 elements
var 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;
}