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, посмотрите ее ...
РЕДАКТИРОВАТЬ ИСПРАВЛЕННАЯ ссылка для поддержки кросс-браузерной поддержки http://jsfiddle.net/RH3tA/9/
ПРИМЕЧАНИЕ что это проверяет только непосредственного родителя, если у родительского 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;
}
И нового JSFiddle, РЕДАКТИРОВАТЬ обновленная ссылка